Canvas + JavaScript 制作图片粒子效果

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

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

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

金沙官网线上 1金沙官网线上 2

金沙官网线上 3

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

金沙官网线上 4

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

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

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

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

参数说明:x,y为画布上的x和y坐标

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

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

参数说明:x,y为画布上的x和y坐标

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

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

imageData={
 data:Unit8ClampedArray[10000] //一个包含图片区域内每个像素点的RGBA的整型数据信息
 height:200 //读取的图片像素信息区域高度
 width:200   //读取的图片像素信息区域宽度
}

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

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

金沙官网线上 5

金沙官网线上,第一个像素信息为:RGBA(data[0],data[1],data[2],data[3])

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

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

第一个像素信息为: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])

.....

  .....

本文由金沙官网线上发布于Web前端,转载请注明出处:Canvas + JavaScript 制作图片粒子效果

您可能还会对下面的文章感兴趣: