首页 » 网站建设 » 粒子特效php技巧_canvas粒子系统构建

粒子特效php技巧_canvas粒子系统构建

访客 2024-12-11 0

扫一扫用手机浏览

文章目录 [+]

imageData

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

【getImageData()】

粒子特效php技巧_canvas粒子系统构建

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

粒子特效php技巧_canvas粒子系统构建
(图片来自网络侵删)

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

返回的工具是ImageData的实例,每个ImageData工具有3个属性:width\height\data

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

2、height:表示imageData工具的高度

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

[把稳]图像中有多少像素,data的长度就即是像素个数乘以4

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

[把稳]如果要利用getImageData()获取的canvas中包含drawImage()方法,则该方法中的URL不能跨域

【createImageData()】

createImageData(width,height)方法创建新的空缺ImageData工具。
新工具的默认像素值 transparent black,相称于rgba(0,0,0,0)

【putImageData()】

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

[把稳]参数3到7要么都没有,要么都存在

粒子写入

粒子,指图像数据imageData中的每一个像素点。
下面以一个大略单纯实例来解释完备写入与粒子写入

【完备写入】

200200的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)方法即可,如果粒子处于当前路径中,则沿着鼠标指针与粒子坐标组成的直线方向,移动到路径的边缘

利用鼠标点击canvas中的笔墨,涌现效果

综合实例

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

标签:

相关文章