canvas特效,canvas相框怎么使用

　　画布真是个神奇的东西。它不仅可以绘制各种图形、文本和位图，还可以对位图进行复杂的像素运算和处理。所以滤镜之类的东西其实是可以用画布来实现的。接下来，就是见证奇迹的时刻了。

　　首先，我们需要一个画布容器，例如：

　　Canvas ID= my canvas width= 800 height= 800 /canvas接下来，我们需要用canvas来画一幅图：

　　var my canvas=document . getelementbyid( my canvas )；var CTX=my canvas . get context( 2d )；var img=new Image()；img.src=。/images/1526010092000 . jpg ；//自带图片链接img . onload=(e)={ CTX . draw image(img，0，0，800，800)；//第一个800表示所画图片的宽度，第二个800表示所画图片的高度}

　　第一次用画布画画的效果

　　下一步是对图片的像素做一些操作。为了实现这个操作，需要从Canvas中获取图片的像素信息，可以通过getImageData()获取信息。

　　//.省略前面的代码img.onload=(e)={//.省略前面的代码img=CTX.getimagedata (0，0，800，800)；//获取包含每个像素颜色的字节数据}因为图片的大小是800 * 800，所以要遍历像素才能得到每个像素的红绿蓝值。因此：

　　//.省略前面的代码img.onload=(e)={//.省略前面的代码var pixelLen=800 * 800//获取(var i=0的像素数；I pixelLen * 4；I=4) {var redC=img.data[i]，//第一个字节单元表示红色greenC=img.data[i 1]，//第二个字节单元表示绿色蓝色c=img.data [i 2]，//第三个字节单元表示蓝色alpha=img . data[I 3]；//第四个字节单位表示透明度}}通过上面的循环，我们得到图片数据中包含的每个像素的具体颜色值；需要注意的是，每个像素的数据不是一位，而是相邻的四位，分别代表该像素的红、绿、蓝、透明值。所以实际上位图字节数据的数组长度等于像素数乘以4，我们在for循环中也处理了这个特性。

　　通过平均每个点的红、绿、蓝值，然后将生成的平均值以同样的方式赋给该像素点的红、绿、蓝值，就可以形成灰度效果。最后可以用putImageData()方法重画图片。代码如下：

　　//.省略前面的代码img.onload=(e)={//.省略前面的代码(var I=0；I pixelLen * 4；I=4) {//.省略前面的代码var grey=parse int((redc greenc blue c)/3)；//平均后得到灰度值img . data[I]=grey；//更改红色值img . data[I 1]=grey；//更改绿色值img . data[I 2]=grey；//更改蓝色值} ctx.putimagedata (img，0，0，800，800)；//重绘图片}此时会形成一个灰度效果，如下图。

　　画布第二次绘制图片-灰度效果

　　对于透明度控制，只需要修改第四个字节单元对应的值。该值的范围从0到256，0表示完全透明，256表示完全不透明。例如：

　　//.省略前面的代码img.onload=(e)={//.省略前面的代码(var I=0；I pixelLen * 4；I=4) {//.省略前面的代码img . data[i3]=128；//透明度50%} //.省略前面的代码}

　　画布第三绘制效果-增加透明度

　　所以，通过控制画面中每个像素的4个数据的值，就可以达到滤镜的效果，不是那么容易吗！

　　参考资料：

　　055-79000刘欢编辑

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。