Canvas + JavaScript 制作图片粒子效果

学习canvas，javascript的小伙伴，可以跟着我这篇文章的思路一起做一个小效果出来，代码都齐全了。

首先看一下源图和转换成粒子效果的对比图：

左侧图片为源图，右侧图片为粒子效果图。该效果是在Canvas画布上制作的。将图片制作成粒子效果相对而言是比较简单的。重点了解两个知识点即可

1:图片是通过image对象形式绘制在画布上的，然后使用Canvas的getImageData接口，获取图像的像素信息。

var imageData=ctx.getImageData(x, y, width, height);

参数说明：x，y为画布上的x和y坐标

width，height为获取指定区域图像的信息

返回值说明：imageData为返回值，它是一个对象，包含三个属性

2:了解像素区域数据的排布说明，以上获取的图片数据像素信息(imageData对象中的data属性)为RGBA整型的一维数组数据。一个像素是有4个值（R,G,B,A）组成的。也就是说，数组信息每四个为一个像素点。因此，有以下规则，

第一个像素信息为：RGBA(data[0],data[1],data[2],data[3])

第二个像素信息为：RGBA(data[4],data[5],data[6],data[7])

.....

第N个像素信息为: RGBA(data[(n-1)*4],data[(n-1)*4+1],data[(n-1)*4+2],data[(n-1)*4+3])

.....

另外，像素区域既然是一个区域，它是有宽和高的。上面的推算公式适合单独一行使用定位一个像素点。所以计算像素点时要考虑到在整个图像区域内定位：

以上图为例。图像的宽和高都为200，如果按照每一个像素为一行一列时。则该图像共有200行，200列。所以要取得 i 行第 j 列的像素初始位置信息为：

var pos =[( i-1 )*200]+( j-1 )]*4;

其中，公式中的 i 表示行数，j 表示列数。200为图像的宽度。

demo代码：

上面如果不理解， 对照代码运行一下试试理解吧：

这次没能为粒子加上炫酷的动态效果~~下次补上，找一些算法就可以粒子动起来的，有兴趣可以做做看~

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助

整个效果的功能都完成了

如果大家想学习canvas，JavaScript，可以加群： 640633433群里面有每天都会上传视频供大家学习，欢迎学习交流的小伙伴过来一起学习交流！

 

写在最后：

很多人都知道我是学全栈的，都天真的以为我有全套的前端、网页制作等视频学习资料。我想说你们是对的，我的确有前端的全套视频资料。
如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端EDU’关注后回复可以领取一套完整的学习视频！