canvas用于在网页上绘制图像、动画，可以将其理解为画布，在这个画布上构建想要的效果。
canvas可以绘制动态效果，除了常用的规则动画之外，还可以采用粒子的概念来实现较复杂的动效，本文分别采用普通动效与粒子特效实现了一个简单的时钟。
普通时钟
普通动效即利用canvas的api，实现有规则的图案、动画。
效果
该效果实现比较简单，主要分析一下刻度与指针角度偏移的实现。
绘制刻度
此例为小时刻度的绘制：表盘上共有12个小时，Math.PI为180°，每小时占据30°。
.save()表示保存canvas当前环境的状态，在此基础上进行绘制。绘制完成之后，返回之前保存过的路径状态和属性。
分钟刻度同理，改变角度与样式即可。
| // 小时时间刻度 offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // 刻度颜色 offscreenCanvasCtx.strokeStyle = '#fff'; // 刻度宽度 offscreenCanvasCtx.lineWidth = 3; // 每小时占据30° offscreenCanvasCtx.rotate(Math.PI / 6); // 开始绘制的位置 offscreenCanvasCtx.lineTo(140, 0) // 结束绘制的位置; offscreenCanvasCtx.lineTo(120, 0); // 绘制路径 offscreenCanvasCtx.stroke(); } offscreenCanvasCtx.restore(); |
指针指向
以秒针为例：获取当前时间的秒数，并计算对应的偏移角度
| var now = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); hr = hr > 12 ? hr - 12 : hr; //秒针 offscreenCanvasCtx.save(); offscreenCanvasCtx.rotate(sec * (Math.PI / 30)); ...... offscreenCanvasCtx.stroke(); |
粒子动效
canvas可以用来绘制复杂，不规则的动画。粒子特效可以用来实现复杂、随机的动态效果。
粒子，指图像数据imageData中的每一个像素点，获取到每个像素点之后，添加属性或事件对区域内的粒子进行交互，达到动态效果。
效果
粒子获取
以下图的图片转化为例，该效果是先在canvas上渲染图片，然后获取文字所在区域的每个像素点。
