大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

基于canvas粒子系统的构建详解

前面的话

交口ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!

本文将从最基本的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个

粒子筛选

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

【按序筛选】

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



【随机筛选】

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



像素显字

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

【按序像素显字】

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



【随机像素显字】

随机像素显字的原理类似,保存多个不同数量的随机像素的数组即可



粒子动画

粒子动画并不是粒子在做动画,而是通过getImageData()方法获得粒子的随机坐标和最终坐标后,通过fillRect()方法绘制的小方块在做运动。使用定时器,不断的绘制坐标变化的小方块,以此来产生运动的效果

【随机位置】




【飘入效果】 

飘入效果与随机显字的原理相似,不再赘述



鼠标交互

一般地,粒子的鼠标交互都与isPointInPath(x,y)方法有关

【移入变色】

当鼠标接近粒子时,该粒子变红。实现原理很简单。鼠标移动时,通过isPointInPath(x,y)方法检测,有哪些粒子处于当前指针范围内。如果处于,绘制1像素的红色矩形即可


【远离鼠标】

鼠标点击时,以鼠标指针为圆心的一定范围内的粒子需要移动到该范围以外。一段时间后,粒子回到原始位置

实现原理并不复杂,使用isPointInPath(x,y)方法即可,如果粒子处于当前路径中,则沿着鼠标指针与粒子坐标组成的直线方向,移动到路径的边缘


综合实例

下面将上面的效果制作为一个可编辑的综合实例




 
 Document




粒子设置:
粒子效果:
鼠标效果: 1、鼠标移到文字上时,文字颜色变红; 2、鼠标在文字上点击时,粒子远离鼠标指针

以上这篇基于canvas粒子系统的构建详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。


网页名称:基于canvas粒子系统的构建详解
文章来源:http://dzwzjz.com/article/gsjceo.html
在线咨询
服务热线
服务热线:028-86922220
TOP