canvas如何實(shí)現(xiàn)濾鏡效果
這篇文章給大家分享的是有關(guān)canvas如何實(shí)現(xiàn)濾鏡效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站專注于敘永企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購物商城網(wǎng)站建設(shè)。敘永網(wǎng)站建設(shè)公司,為敘永等地區(qū)提供建站服務(wù)。全流程按需開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas-濾鏡</title>
<style>
canvas{
border: 1px solid red;
float: left;
/* background-color:red; */
}
</style>
</head>
<body>
<canvas id="oldCanvas" width="500px" height="300px">
</canvas>
<canvas id="nowCanvas" width="500px" height="300px">
</canvas>
<button onclick = "copy2()">底片效果</button><br>
<button onclick = "copy3()">黑白效果</button><br>
<button onclick = "copy4()">浮雕效果</button><br>
<button onclick = "copy1()">灰色濾鏡</button><br>
<button onclick = "copy5()">綠色濾鏡</button><br>
<button onclick = "copy6()">藍(lán)色濾鏡</button><br>
<button onclick = "copy7()">紅色濾鏡</button><br>
<button onclick = "copy8()">黃色濾鏡</button><br>
<button onclick = "copy9()">紫色濾鏡</button><br>
<button onclick = "copy10()">青色濾鏡</button><br>
<script>
//獲取到canvas元素
var oldcanvas = document.getElementById('oldCanvas');
//獲取canvas中的畫圖環(huán)境
var oldcontext = oldcanvas.getContext('2d');
//獲取到canvas元素
var nowcanvas = document.getElementById('nowCanvas');
//獲取canvas中的畫圖環(huán)境
var nowcontext = nowcanvas.getContext('2d');
var img = new Image();
img.src = "./image/liuyifei.jpg";
window.onload = function (){
//繪制圖像
oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height);
copy1();
};
//灰度效果
function copy1(){
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）；
var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(var i=0;i<imgdata.data.length;i += 4){
//計算獲取單位元素的RBG然后取平均值 然后復(fù)制給自身得到灰色的圖像
var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3;
imgdata.data[i] =avg;
imgdata.data[i+1] =avg;
imgdata.data[i+2] =avg;
}
//將圖像信息繪制第二個canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//底片效果
function copy2(){
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）；
var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(var i=0;i<imgdata.data.length;i += 4){
//將所有的RGB值重新賦值（底片效果 = 255 - 當(dāng)前的RGB值）
imgdata.data[i] =255-imgdata.data[i];
imgdata.data[i+1] =255-imgdata.data[i+1];
imgdata.data[i+2] =255-imgdata.data[i+2];
}
//將圖像信息繪制第二個canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//黑白效果
function copy3(){
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）；
var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(var i=0;i<imgdata.data.length;i += 4){
//計算獲取單位元素的RBG然后取平均值
var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3;
imgdata.data[i] =avg>128 ? 255 :0;
imgdata.data[i+1] =avg>128 ? 255 :0;
imgdata.data[i+2] =avg>128 ? 255 :0;
}
//將圖像信息繪制第二個canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//浮雕效果
function copy4(){
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）；
var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(var i=0;i<imgdata.data.length;i += 4){
//浮雕效果的算法：當(dāng)前RGB減去相鄰的GRB得到的值再加上128
imgdata.data[i] =imgdata.data[i]-imgdata.data[i+4]+128;
imgdata.data[i+1] =imgdata.data[i+1]-imgdata.data[i+5]+128;
imgdata.data[i+2] =imgdata.data[i+2]-imgdata.data[i+6]+128;
//計算獲取單位元素的RBG然后取平均值 再次灰度，優(yōu)化浮雕的效果
var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3;
imgdata.data[i] =avg;
imgdata.data[i+1] =avg;
imgdata.data[i+2] =avg;
}
//將圖像信息繪制第二個canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//綠色濾鏡
function copy5(){
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）；
var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(var i=0;i<imgdata.data.length;i += 4){
//綠色濾鏡的算法：當(dāng)前綠色通道值G*1.4得到綠色濾鏡
var g =imgdata.data[i+1]*1.4;
//注：當(dāng)前值大于255時將其賦值255
imgdata.data[i+1] =g>255 ? 255 : g;
}
//將圖像信息繪制第二個canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//藍(lán)色濾鏡
function copy6() {
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）；
var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
for (var i = 0; i < imgdata.data.length; i += 4) {
//藍(lán)色濾鏡的算法：當(dāng)前藍(lán)色通道值變?yōu)樵瓉淼?.6得到藍(lán)色濾鏡
var b = imgdata.data[i + 2] * 1.6;
//注：當(dāng)前值大于255時將其賦值255
imgdata.data[i + 2] = b > 255 ? 255 : b;
}
//將圖像信息繪制第二個canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//紅色濾鏡
function copy7() {
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）；
var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
for (var i = 0; i < imgdata.data.length; i += 4) {
//紅色濾鏡的算法：當(dāng)前紅色通道值變?yōu)樵瓉淼?得到紅色濾鏡
var r = imgdata.data[i] * 2;
//注：當(dāng)前值大于255時將其賦值255
imgdata.data[i] = r > 255 ? 255 : r;
}
//將圖像信息繪制第二個canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//黃色濾鏡
function copy8() {
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）；
var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
for (var i = 0; i < imgdata.data.length; i += 4) {
//黃色濾鏡的算法：紅色通道值和綠色通道值增加50（紅色+綠色 = 黃色）
var r = imgdata.data[i] +50;
var g = imgdata.data[i+1] +50
//注：當(dāng)前值大于255時將其賦值255
imgdata.data[i] = r > 255 ? 255 : r;
imgdata.data[i+1] = g > 255 ? 255 : g;
}
//將圖像信息繪制第二個canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//紫色濾鏡
function copy9() {
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）；
var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
for (var i = 0; i < imgdata.data.length; i += 4) {
//紫色濾鏡的算法：紅色通道值和藍(lán)色通道值增加50（紅色+藍(lán)色 = 紫色）
var r = imgdata.data[i] +50;
var b = imgdata.data[i+2] +50
//注：當(dāng)前值大于255時將其賦值255
imgdata.data[i] = r > 255 ? 255 : r;
imgdata.data[i+2] = b > 255 ? 255 : b;
}
//將圖像信息繪制第二個canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//青色濾鏡
function copy10() {
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）；
var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
for (var i = 0; i < imgdata.data.length; i += 4) {
//青色濾鏡的算法：綠色通道值和藍(lán)色通道值增加50（綠色+藍(lán)色 = 青色）
var g = imgdata.data[i+1] +50;
var b = imgdata.data[i+2] +50
//注：當(dāng)前值大于255時將其賦值255
imgdata.data[i+1] = g > 255 ? 255 : g;
imgdata.data[i+2] = b > 255 ? 255 : b;
}
//將圖像信息繪制第二個canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
</script>
</body>
</html>感謝各位的閱讀！關(guān)于“canvas如何實(shí)現(xiàn)濾鏡效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
新聞標(biāo)題：canvas如何實(shí)現(xiàn)濾鏡效果
文章起源：http://vcdvsql.cn/article40/peicho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、做網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)站營銷、品牌網(wǎng)站制作、網(wǎng)站排名
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 為什么企業(yè)需要響應(yīng)式網(wǎng)站建設(shè)？介紹響應(yīng)式建站優(yōu)勢 2016-11-27
- 網(wǎng)站制作之網(wǎng)站ICP備案不做對于網(wǎng)絡(luò)推廣有什么樣的影響 2016-10-25
- 旅游網(wǎng)站制作的現(xiàn)狀和要素設(shè)計 2021-12-26
- 成都網(wǎng)站制作如何找到優(yōu)秀的網(wǎng)絡(luò)公司 2016-10-31
- 關(guān)于網(wǎng)站制作過程中的幾個不 2016-11-03
- 網(wǎng)站制作時要記得用戶體驗(yàn) 2017-01-29
- 如何做好網(wǎng)站制作的合理規(guī)劃 2016-10-26
- 專業(yè)網(wǎng)站制作多少錢 網(wǎng)站建設(shè)的目的 2021-05-09
- 企業(yè)網(wǎng)站制作時網(wǎng)頁設(shè)計的原則 2021-09-10
- 分享如何增加網(wǎng)站排名技巧_深圳網(wǎng)站制作公司 2021-11-17
- 手機(jī)網(wǎng)站制作還有必要嗎？ 2016-11-12
- 網(wǎng)站未來定位的發(fā)展趨勢【佛山網(wǎng)站制作】 2022-11-20