ag体育投注>ag体育app>大红鹰彩票官网app-html5 canvas 粒子特效显示图像/文字

大红鹰彩票官网app-html5 canvas 粒子特效显示图像/文字

2020-01-09 12:51:00

大红鹰彩票官网app-html5 canvas 粒子特效显示图像/文字

大红鹰彩票官网app,本次实例将图片或文字分解成粒子。是先将图片或者文字画在canvas上,然后通过画布对象的getimagedata获取到画布上的所有像素点,也就是imagedata对象的data数组,存放着画布的所有像素的rgba值。

html5 canvas 粒子特效显示图像/文字

然后再遍历像素点,获取到当前像素点的rgba的a值也就是alpha透明度不为0,我直接舍弃了地透明度的,所以我写的判断是直接大于125就行了,255为不透明。

获取到粒子的位置后,就实例化出粒子对象,代码如下:

将实例化的粒子对象扔进一个数组里保存起来。然后执行动画循环。

animate方法的回调即为每次画布逐帧循环时调用的方法,其中animatearray就是真正用于放置于循环舞台的粒子对象,也就是上面demo中看到的从左到右一个一个粒子出现的效果,其实就是从particlearray中取粒子对象,在每一帧中扔几十个进animatearray中,所以就有了粒子一个一个出来的效果。

animate方法代码如下:

这个代码就比较简单了,设置每一帧之间的时间差,我一般是设成16毫秒,这个就自己看哈,给tick方法传参循环。

在逐帧循环回调中,触发每个粒子对象的update,其中粒子的运动函数,绘画函数全部会由update函数触发。

下面这个是粒子对象的封装,其中x,y为粒子的位置,ex,ey为粒子的目标位置,vx,vy为粒子的速度,color为粒子的颜色,particlesize为粒子的大小,stop是粒子是否静止,maxchecktimes和checklength和checktimes是检测粒子是否静止的属性,因为粒子在运动的时候,位置是无时无刻都在变化,所以是没有绝对静止的,所以需要手动检测是否约等于静止,然后再给予粒子静止状态,当粒子与目标位置的距离小于checklength,并且在连续10帧的检测都粒子与距离目标都是小于checklength,则说明粒子约等于静止了,将粒子的stop属性置为true,再接下来的动画逐帧循环中,对于stop为true的粒子则不进行运动计算:

粒子的方法中,drawself为粒子的绘制自身的方法,画布的绘制对象的方法的调用次数越少,对整个动画的性能提升越大。因此,把粒子画成正方形,因为画正方形只需调用一个fillrect方法,而如果画圆形则需要先调用beginpath开始路径的绘制,再调用arc绘制路径,最后再通过fill填充颜色。性能方面肯定是画正方形性能更好,于是直接用fillrect。而也对粒子的color进行缓存,如果连续绘制的多个粒子颜色相同,就不用重复调用fillstyle方法更新画笔颜色。

然后是update方法,这个方法是粒子运动的核心,但是原理很简单,就是一些简单的运动学知识,获取到粒子与目标点夹角的角度,通过角度将粒子的加速度分解为水平和垂直加速度,再计算出粒子在新的一帧的水平速度和垂直速度,然后再通过新的速度计算出粒子新的位置,最后再绘制出来。update方法底部的if else则是判断粒子是否静止的代码。

粒子的最后一个方法,checkmouse其实就是检测鼠标位置,如果粒子跟鼠标的距离小于15,则将粒子的目标位置置于与鼠标距离为15的地方,为了保证鼠标移开后粒子还能回到原来的地方,所以用了个recordx和recordy来记录粒子初始的位置,当鼠标离开粒子时,重置粒子的目标位置。从而让粒子回到原来的位置。

作者简介:资深程序员,蚂蚁h5社区创始人,欢迎关注我!

演示/下载源码,请点击了解更多。