画布JavaScript制作图片粒子效果

首先，看一下转换为粒子效果的源贴图和比较贴图：

左图为源图，右图为粒子效果图。效果是在画布上制作的。将图片制作成粒子效果相对简单。关注两个知识点

1:图片以图像对象的形式绘制在canvas上，然后利用Canvas的getImageData接口获取图像的像素信息。

var imageData=CTX . getimagedata(x，y，宽度，高度)；

参数描述：x和y是画布上的x和y坐标

宽度和高度是获取指定区域图像的信息

返回值描述：imageData是一个返回值，它是一个对象，包含三个属性

Imagedata={data:unit 8箝位数组[10000]//一个包含图片区域中每个像素的RGBA的整数数据信息高度：200//图片像素信息区域的高度宽度：200读取//图片像素信息区域的宽度读取} 23:了解像素区域数据的排列描述。上面得到的图片数据(imageData对象中的数据属性)的像素信息是RGBA整数的一维数组数据。一个像素由四个值(R、G、B、A)组成。也就是说，每四个阵列信息就是一个像素。因此，有以下规则，

第一像素信息是rgba(数据[0]、数据[1]、数据[2]、数据[3])

第二像素信息是rgba(数据[4]、数据[5]、数据[6]、数据[7])

.

第n个像素信息是：rgba(数据[(n-1) * 4]、数据[(n-1) * 4 1]、数据[(n-1) * 4 2]、数据[(n-1) * 4 3])

.

此外，由于像素区域是一个区域，所以它具有宽度和高度。上述计算公式适用于将一个像素定位在一条直线上。因此，在计算像素点时，请考虑在整个图像区域中定位：

上图就是一个例子。如果每个像素是一行一列，图像的宽度和高度都是200。图像中有200行200列。因此，要获得的行I和列j中的像素的初始位置信息如下：

var pos=[(I-1)* 200](j-1)]* 4；

在公式中，I代表行数，j代表列数。200是图像的宽度。

演示代码：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title/head dycanvas id=' myCanvas ' width=' 600 ' height=' 400 ' style=' background : # 000 '浏览器不支持canvas/canvas/body脚本类型=' text/JavaScript ' var canvas=document；getelementbyid('我的画布')；var CTX=canvas . getcontext(' 2d ')；var image=新图像()；image . src='/WebWorkSpace/echart demo/images/star . png '；var像素=[]；//存储像素数据var imageDataimage . onload=function(){ CTX . draw image(image，200，100，200，200)；imageData=ctx.getImageData(200，100，200，200)；//获取图表像素信息getPixels()；//获取所有像素的draw pic()；//绘制图像}；函数GetPixels(){ var pos=0；var data=imageData.data//RGBA的一维数组数据//源图像的高度和宽度为200 px for(var I=1；i=200I){ for(var j=1；j=200j){ pos=[(I-1)* 200(j-1)]* 4；//获取像素位置if(data[pos]=0){ var pixel={ x :200 jmath。random () * 20，//重置每个像素的位置信息y:100 i Math.random()*20，//重置每个像素的位置信息fillstyle:' rgba ('data [pos]'、'(data[pos]1)'、'(data[pos]2)'、'(data[pos]3)')' }像素。push(像素)；} } } }函数draw pic(){ var canvas=document . getelementbyid(' my canvas ')；var CTX=canvas . getcontext(' 2d ')；ctx.clearRect(0，0，600，400)；var len=pixels.length，curr _ pixel=nullfor(var I=0；伊琳；I){ curr _ pixel=pixels[I]；CTX . fillstyle=curr _ pixel . fillstyle；ctx.fillRect(curr_pixel.x，curr_pixel.y，1，1)；} }/script/html如果您不理解上面的内容，请对照代码运行它并尝试理解它：

可惜我数学不好，算法也不好。不能给粒子添加酷炫的动态效果~ ~其实可以找一些算法让粒子移动。有兴趣可以做~

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！