canvas的神奇用法

前端之家收集整理的这篇文章主要介绍了canvas的神奇用法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

canvas有一个神奇的方法getImageData这个玩意。它可以获取canvas内图像的没一个像素点的颜色值获取,而且可以改变。

如果你有各种滤镜的算法。那么用canvas就可以实现图片的滤镜转化,可以做成类似美图秀秀那样的功能

使用方法

1:先将图片导入画布。

2:var canvasData = context.getImageData(0,canvas.width,canvas.height); //用这个将图片每个像素点的信息获取出来,得到一个数组。注意得到的信息不是[[r,g,b,a],[r,a]]这样的二维数组而是[r,a,r,a]这样的按rgba顺序排列的单个的数组。

3:这一步就是开始将每个像素的rgba改变。这里简单介绍一下灰度效果的算法及实现步骤。

(canvasData.width - 8) || y > (canvasData.height - 8)) { canvasData.data[idx + 0] = 0; canvasData.data[idx + 1] = 0; canvasData.data[idx + 2] = 0; } } } return canvasData; }

4:context.putImageData(canvasData,0); //处理完像素颜色值之后,记得要这一句将画布重绘

这些个代码就是将图片转化为黑白效果代码,具体可以实现多少效果就得看你掌握的滤镜算法有多少了。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:/js/42049.html

猜你在找的JavaScript相关文章