pixelsArr中。
x、y记载了该粒子的位置信息，为了产生效果图中的运动效果，给每个粒子添加了0-20个像素的偏移位置，每次重绘时，偏移位置随机生成，产生运动效果。
粒子重绘
获取粒子之后，需要清除画布中原有的文字，将获取到的粒子重新绘制到画布上去。
| function drawPixels() { // 清除画布内容，进行重绘 ctx.clearRect(0,0,canvas.width,canvas.height); for (let i in pixelsArr) { ctx.fillStyle = pixelsArr[i].fillStyle; let r = Math.random()*4 ctx.fillRect(pixelsArr[i].x, pixelsArr[i].y, r, r); } } |
粒子重绘时的样式为筛选像素时原本的颜色与透明度，并且每个在画布上绘制每个粒子时，定义大小参数r，r取值为0-4中随机的数字。最终生成的粒子大小随机。
实时刷新
获取粒子并成功重绘之后，需要页面实时刷新时间。这里采用window.requestAnimationFrame(callback)方法。
| function time() { ...... getpixels(); //获取粒子 drawPixels(); // 重绘粒子 requestAnimationFrame(time); } |
window.requestAnimationFrame(callback) 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。
该方法不需要设置时间间隔，调用频率采用系统时间间隔（1s）。
文档解释戳这里
效果
总结
本文主要通过两种不同的方式实现了时钟的动态效果，其中粒子时钟具有更多的可操作性。在以后的canvas系列中会针对粒子系统实现更多的动态效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
