详解canvas粒子系统的构建方法

巴扎黑

发布时间：2017-09-01 11:01:41

1478人浏览过

来源于php中文网

原创

下面小编就为大家带来一篇基于canvas粒子系统的构建详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

前面的话

本文将从最基本的imageData对象的理论知识说开去，详细介绍canvas粒子系统的构建

imageData

关于图像数据imageData共有3个方法，包括getImageData()、putImageData()、createImageData()

【getImageData()】

2D上下文可以通过getImageData()取得原始图像数据。这个方法接收4个参数：画面区域的x和y坐标以及该区域的像素宽度和高度

例如，要取得左上角坐标为(10,5)、大小为50*50像素的区域的图像数据，可以使用以下代码：

var imageData = context.getImageData(10,5,50,50);

返回的对象是ImageData的实例，每个ImageData对象有3个属性：width\height\data

1、width：表示imageData对角的宽度

2、height：表示imageData对象的高度

3、data是一个数组，保存着图像中每一个像素的数据。在data数组中，每一个像素用4个元素来保存，分别表示red、green、blue、透明度

[注意]图像中有多少像素，data的长度就等于像素个数乘以4

//第一个像素如下
var data = imageData.data;
var red = data[0];
var green = data[1]; 
var blue = data[2];
var alpha = data[3];

数组中每个元素的值是在0-255之间，能够直接访问到原始图像数据，就能够以各种方式来操作这些数据

[注意]如果要使用getImageData()获取的canvas中包含drawImage()方法，则该方法中的URL不能跨域

【createImageData()】

createImageData(width,height)方法创建新的空白ImageData对象。新对象的默认像素值 transparent black，相当于rgba(0,0,0,0)

var imgData = context.createImageData(100,100);

【putImageData()】

putImageData()方法将图像数据从指定的ImageData对象放回画布上，该方法共有以下参数

imgData：要放回画布的ImageData对象(必须)
x：imageData对象的左上角的x坐标(必须)
y：imageData对象的左上角的y坐标(必须)
dirtyX：在画布上放置图像的水平位置(可选)
dirtyY：在画布上放置图像的垂直位置(可选)
dirtyWidth：在画布上绘制图像所使用的宽度(可选)
dirtyHeight：在画布上绘制图像所使用的高度(可选)

[注意]参数3到7要么都没有，要么都存在

context.putImageData(imgData,0,0);
context.putImageData(imgData,0,0,50,50,200,200);

粒子写入

粒子，指图像数据imageData中的每一个像素点。下面以一个简易实例来说明完全写入与粒子写入

【完全写入】

200*200的canvas1中存在文字'小火柴'，并将canvas1整个作为图像数据写入同样尺寸的canvas2中

【粒子写入】

对于完全写入而言，相当于只是简单的复制粘贴，如果要对每个像素点进行精细地控制，则需要使用粒子写入。canvas1中存在着大量的空白区域，只有'小火柴'这三个字的区域是有效的。于是，可以根据图像数据imageData中的透明度对粒子进行筛选，只筛选出透明度大于0的粒子

虽然结果看上去相同，但canvas2只使用了canvas1中40000个粒子中的2336个

网亚Net!B2B

网亚Net!B2B从企业信息化服务的整体解决方案上提供了实用性的电子商务建站部署，企业无需进行复杂的网站开发，直接使用Net!B2B系列，就能轻松构建具有竞争力的行业门户网站，如果您有特殊需要，系统内置的模板体系和接口体系，让网站可以按照自己的个性要求衍生出庞大的门户服务需求，网亚Net!B2B电子商务建站系统可以让您以希望的方式开展网上服务，无论是为您的客户提供信息服务，新闻服务，产品展示与产品

下载

粒子筛选

当粒子完全写入时，与canvas复制粘贴的效果相同。而当粒子有所筛选时，则会出现一些奇妙的效果

【按序筛选】

由于取得粒子时，使用的是宽度值*高度值的双重循环，且都以加1的形式递增。如果不是加1，而是加n，则可以实现按序筛选的效果

【随机筛选】

除了使用按序筛选，还可以使用随机筛选。通过双重循环得到的粒子的位置信息，放到dots数组中。通过splice()方法进行筛选，将筛选后的位置信息放到新建的newDots数组中，然后再使用createImageData()，新建一个图像数据对象并返回

像素显字

下面来使用粒子筛选来实现一个像素显字的效果。像素显字即从不清晰的效果逐步过渡到完全显示

【按序像素显字】

按序像素显字的实现原理非常简单，比如，共有2000个粒子，共10个程度的过渡效果。则使用10个数组，分别保存200,400,600,800,100,1200,1400,1600,1800和2000个粒子。然后使用定时器将其逐步显示出来即可

【随机像素显字】