canvas中普通动效与粒子动效的实现方法介绍（代码示例）-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于canvas中普通动效与粒子动效的实现方法介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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上渲染图片，然后获取文字所在区域的每个像素点。

let image = new Image();
 image.src='../image/logo.png';
 let pixels=[]; //存储像素数据
 let imageData;
 image.width = 300;
 image.height = 300
 // 渲染图片，并获取该区域内像素信息
 image.onload=function(){
   ctx.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height);
   imageData=ctx.getImageData((canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height); //获取图表像素信息
//绘制图像
 };