这篇“html5中怎么用Canvas实现滤镜效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“html5中怎么用Canvas实现滤镜效果”文章吧。

Canvas 真的是一个神奇的东西，不仅能够绘制各种图形、文本和位图，还能够对位图进行复杂的像素运算和处理。因此像滤镜这些东西，其实 Canvas 也可以来实现。接下来，是见证奇迹的时刻。

首先，我们需要有一个 Canvas 容器，例如：

<canvasid="myCanvas"width="800"height="800"></canvas>

接下来，我们需要将使用 Canvas 来绘制一张图片:

varmyCanvas=document.getElementById("myCanvas");varctx=myCanvas.getContext("2d");varimg=newImage();img.src="./images/1526010092000.jpg";//自备图片链接img.onload=(e)=>{ctx.drawImage(img,0,0,800,800);//第一个800表示绘制图片的宽，第二个800表示绘制图片的高}

再接下来就是对图片的像素进行一些操作。而要实现这样的操作，首先需要从 Canvas 获取到图片的像素信息，而获取这些信息可以通过 getImageData() 来实现。

//...省略前面代码img.onload=(e)=>{//...省略前面代码img=ctx.getImageData(0,0,800,800);//获得包含每个像素点颜色的字节数据}

由于图片的大小为 800 * 800，因为要对像素点进行遍历，以获得每一个像素点的红、绿、蓝色值。因此：

//...省略前面代码img.onload=(e)=>{//...省略前面代码varpixelLen=800*800;//获得像素个数for(vari=0;i<pixelLen*4;i+=4){varredC=img.data[i],//第一个字节单位代表红色greenC=img.data[i+1],//第二个字节单位代表绿色blueC=img.data[i+2],//第三个字节单位代表蓝色alpha=img.data[i+3];//第四个字节单位代表透明度}}

通过上面循环，我们获取到了包含在图片数据中的每个像素点的具体色值；需要注意的一点是，每一个像素点的数据不是一位，而是相邻的四位，分别代表了该点的红、绿、蓝和透明值。因此，实际上位图字节数据的数组长度等于像素点个数乘以 4，在 for 循环中我们也针对这一特性进行了相应处理。

通过将每一点的红、绿、蓝值进行平均，然后再将生成的平均值相同地赋予该像素点的红、绿、蓝值，就能形成灰度效果，最后通过 putImageData() 方法来重新绘制图片即可，代码如下：

//...省略前面代码img.onload=(e)=>{//...省略前面代码for(vari=0;i<pixelLen*4;i+=4){//...省略前面代码vargrey=parseInt((redC+greenC+blueC)/3);//平均后获取灰度值img.data[i]=grey;//改变红色值img.data[i+1]=grey;//改变绿色值img.data[i+2]=grey;//改变蓝色值}ctx.putImageData(img,0,0,800,800);//重新绘制图片}

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

透明度的控制只需要修改第四个字节单位对应的数值即可，该数值的范围为0~256，0代表完全透明，256代表完成不透明。例如：

//...省略前面代码img.onload=(e)=>{//...省略前面代码for(vari=0;i<pixelLen*4;i+=4){//...省略前面代码img.data[i+3]=128;//透明度50%}//...省略前面代码}

以上就是关于“html5中怎么用Canvas实现滤镜效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。