html5中怎么用Canvas实现滤镜效果
导读:本文共1810字符,通常情况下阅读需要6分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: Canvas 真的是一个神奇的东西,不仅能够绘制各种图形、文本和位图,还能够对位图进行复杂的像素运算和处理。因此像滤镜这些东西,其实 Canvas 也可以来实现。接下来,是见证奇迹的时刻。首先,我们需要有一个 Canvas 容器,例如:<canvasid="myCanvas"width="800"height=&qu... ...
目录
(为您整理了一些要点),点击可以直达。Canvas 真的是一个神奇的东西,不仅能够绘制各种图形、文本和位图,还能够对位图进行复杂的像素运算和处理。因此像滤镜这些东西,其实 Canvas 也可以来实现。接下来,是见证奇迹的时刻。
首先,我们需要有一个 Canvas 容器,例如:
接下来,我们需要将使用 Canvas 来绘制一张图片:
再接下来就是对图片的像素进行一些操作。而要实现这样的操作,首先需要从 Canvas 获取到图片的像素信息,而获取这些信息可以通过 getImageData()
来实现。
由于图片的大小为 800 * 800,因为要对像素点进行遍历,以获得每一个像素点的红、绿、蓝色值。因此:
通过上面循环,我们获取到了包含在图片数据中的每个像素点的具体色值;需要注意的一点是,每一个像素点的数据不是一位,而是相邻的四位,分别代表了该点的红、绿、蓝和透明值。因此,实际上位图字节数据的数组长度等于像素点个数乘以 4,在 for 循环中我们也针对这一特性进行了相应处理。
通过将每一点的红、绿、蓝值进行平均,然后再将生成的平均值相同地赋予该像素点的红、绿、蓝值,就能形成灰度效果,最后通过 putImageData()
方法来重新绘制图片即可,代码如下:
Canvas第二次绘制图片-灰度效果
透明度的控制只需要修改第四个字节单位对应的数值即可,该数值的范围为0~256,0代表完全透明,256代表完成不透明。例如:
html5中怎么用Canvas实现滤镜效果的详细内容,希望对您有所帮助,信息来源于网络。