canvas滤镜效果实现代码
本文实例为大家分享了canvas实现滤镜效果的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>canvas-滤镜</title>
<style>
canvas{
border:1pxsolidred;
float:left;
/*background-color:red;*/
}
</style>
</head>
<body>
<canvasid="oldCanvas"width="500px"height="300px">
</canvas>
<canvasid="nowCanvas"width="500px"height="300px">
</canvas>
<buttononclick="copy2()">底片效果</button><br>
<buttononclick="copy3()">黑白效果</button><br>
<buttononclick="copy4()">浮雕效果</button><br>
<buttononclick="copy1()">灰色滤镜</button><br>
<buttononclick="copy5()">绿色滤镜</button><br>
<buttononclick="copy6()">蓝色滤镜</button><br>
<buttononclick="copy7()">红色滤镜</button><br>
<buttononclick="copy8()">黄色滤镜</button><br>
<buttononclick="copy9()">紫色滤镜</button><br>
<buttononclick="copy10()">青色滤镜</button><br>
<script>
//获取到canvas元素
varoldcanvas=document.getElementById('oldCanvas');
//获取canvas中的画图环境
varoldcontext=oldcanvas.getContext('2d');
//获取到canvas元素
varnowcanvas=document.getElementById('nowCanvas');
//获取canvas中的画图环境
varnowcontext=nowcanvas.getContext('2d');
varimg=newImage();
img.src="./image/liuyifei.jpg";
window.onload=function(){
//绘制图像
oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height);
copy1();
};
//灰度效果
functioncopy1(){
//获取ImageData的属性：width，height，data（包含RGBA四个值）；
varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(vari=0;i<imgdata.data.length;i+=4){
//计算获取单位元素的RBG然后取平均值然后复制给自身得到灰色的图像
varavg=(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中，注：一般只能在服务下运行
nowcontext.putImageData(imgdata,0,0);
}
//底片效果
functioncopy2(){
//获取ImageData的属性：width，height，data（包含RGBA四个值）；
varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(vari=0;i<imgdata.data.length;i+=4){
//将所有的RGB值重新赋值（底片效果=255-当前的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中，注：一般只能在服务下运行
nowcontext.putImageData(imgdata,0,0);
}
//黑白效果
functioncopy3(){
//获取ImageData的属性：width，height，data（包含RGBA四个值）；
varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(vari=0;i<imgdata.data.length;i+=4){
//计算获取单位元素的RBG然后取平均值
varavg=(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中，注：一般只能在服务下运行
nowcontext.putImageData(imgdata,0,0);
}
//浮雕效果
functioncopy4(){
//获取ImageData的属性：width，height，data（包含RGBA四个值）；
varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(vari=0;i<imgdata.data.length;i+=4){
//浮雕效果的算法：当前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然后取平均值再次灰度，优化浮雕的效果
varavg=(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中，注：一般只能在服务下运行
nowcontext.putImageData(imgdata,0,0);
}
//绿色滤镜
functioncopy5(){
//获取ImageData的属性：width，height，data（包含RGBA四个值）；
varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(vari=0;i<imgdata.data.length;i+=4){
//绿色滤镜的算法：当前绿色通道值G*1.4得到绿色滤镜
varg=imgdata.data[i+1]*1.4;
//注：当前值大于255时将其赋值255
imgdata.data[i+1]=g>255?255:g;
}
//将图像信息绘制第二个canvas中，注：一般只能在服务下运行
nowcontext.putImageData(imgdata,0,0);
}
//蓝色滤镜
functioncopy6(){
//获取ImageData的属性：width，height，data（包含RGBA四个值）；
varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(vari=0;i<imgdata.data.length;i+=4){
//蓝色滤镜的算法：当前蓝色通道值变为原来的1.6得到蓝色滤镜
varb=imgdata.data[i+2]*1.6;
//注：当前值大于255时将其赋值255
imgdata.data[i+2]=b>255?255:b;
}
//将图像信息绘制第二个canvas中，注：一般只能在服务下运行
nowcontext.putImageData(imgdata,0,0);
}
//红色滤镜
functioncopy7(){
//获取ImageData的属性：width，height，data（包含RGBA四个值）；
varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(vari=0;i<imgdata.data.length;i+=4){
//红色滤镜的算法：当前红色通道值变为原来的2得到红色滤镜
varr=imgdata.data[i]*2;
//注：当前值大于255时将其赋值255
imgdata.data[i]=r>255?255:r;
}
//将图像信息绘制第二个canvas中，注：一般只能在服务下运行
nowcontext.putImageData(imgdata,0,0);
}
//黄色滤镜
functioncopy8(){
//获取ImageData的属性：width，height，data（包含RGBA四个值）；
varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(vari=0;i<imgdata.data.length;i+=4){
//黄色滤镜的算法：红色通道值和绿色通道值增加50（红色+绿色=黄色）
varr=imgdata.data[i]+50;
varg=imgdata.data[i+1]+50
//注：当前值大于255时将其赋值255
imgdata.data[i]=r>255?255:r;
imgdata.data[i+1]=g>255?255:g;
}
//将图像信息绘制第二个canvas中，注：一般只能在服务下运行
nowcontext.putImageData(imgdata,0,0);
}
//紫色滤镜
functioncopy9(){
//获取ImageData的属性：width，height，data（包含RGBA四个值）；
varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(vari=0;i<imgdata.data.length;i+=4){
//紫色滤镜的算法：红色通道值和蓝色通道值增加50（红色+蓝色=紫色）
varr=imgdata.data[i]+50;
varb=imgdata.data[i+2]+50
//注：当前值大于255时将其赋值255
imgdata.data[i]=r>255?255:r;
imgdata.data[i+2]=b>255?255:b;
}
//将图像信息绘制第二个canvas中，注：一般只能在服务下运行
nowcontext.putImageData(imgdata,0,0);
}
//青色滤镜
functioncopy10(){
//获取ImageData的属性：width，height，data（包含RGBA四个值）；
varimgdata=oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(vari=0;i<imgdata.data.length;i+=4){
//青色滤镜的算法：绿色通道值和蓝色通道值增加50（绿色+蓝色=青色）
varg=imgdata.data[i+1]+50;
varb=imgdata.data[i+2]+50
//注：当前值大于255时将其赋值255
imgdata.data[i+1]=g>255?255:g;
imgdata.data[i+2]=b>255?255:b;
}
//将图像信息绘制第二个canvas中，注：一般只能在服务下运行
nowcontext.putImageData(imgdata,0,0);
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。