html中如何用canvas标签实现普通动效与粒子动效(canvas,html,开发技术)

canvas用于在网页上绘制图像、动画，可以将其理解为画布，在这个画布上构建想要的效果。

普通时钟

普通动效即利用canvas的api，实现有规则的图案、动画。

绘制刻度

此例为小时刻度的绘制：表盘上共有12个小时，Math.PI为180°，每小时占据30°。
.save()表示保存canvas当前环境的状态，在此基础上进行绘制。绘制完成之后，返回之前保存过的路径状态和属性。

分钟刻度同理，改变角度与样式即可。

指针指向

以秒针为例：获取当前时间的秒数，并计算对应的偏移角度

粒子动效

canvas可以用来绘制复杂，不规则的动画。粒子特效可以用来实现复杂、随机的动态效果。

粒子，指图像数据imageData中的每一个像素点，获取到每个像素点之后，添加属性或事件对区域内的粒子进行交互，达到动态效果。

粒子获取

以下图的图片转化为例，该效果是先在 canvas 上渲染图片，然后获取文字所在区域的每个像素点。

像素信息

图片的大小为300*300，共有90000个像素，每个像素占4位，存放rgba数据。

粒子绘制

粒子时钟

渲染文字时钟

获取粒子

文字转换粒子概念同上，获取选定区域的像素，根据筛选条件进行选择并存入数组。经过遍历后重新绘制。

imgData保存了所选区域内的像素信息，每个像素点占据4位，保存了RGBA四位信息。筛选每个像素的第四位，这段代码中将所有透明度不为0的像素都保存到了数组pixelsArr中。

x、y记载了该粒子的位置信息，为了产生效果图中的运动效果，给每个粒子添加了0-20个像素的偏移位置，每次重绘时，偏移位置随机生成，产生运动效果。

粒子重绘

获取粒子之后，需要清除画布中原有的文字，将获取到的粒子重新绘制到画布上去。

粒子重绘时的样式为筛选像素时原本的颜色与透明度，并且每个在画布上绘制每个粒子时，定义大小参数r，r取值为0-4中随机的数字。最终生成的粒子大小随机。

实时刷新

获取粒子并成功重绘之后，需要页面实时刷新时间。这里采用window.requestAnimationFrame(callback)方法。

window.requestAnimationFrame(callback) 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

该方法不需要设置时间间隔，调用频率采用系统时间间隔（1s）。