可视化系列：Canvas 如何实现动画

可视化系列：Canvas 如何实现动画发布于：2023-03-04 10:36:37 来源：你的微笑、暖暖的查看：46 讨论：0

一、Canvas动画

1.1 Canvas绘图都是通过JavaScript 去操控的，如要实现一些交互性动画是相当容易的。那Canvas是如何做一些基本动画的？
◼ canvas可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。
◼ 如需要执行动画，不得不对画布上所有图形进行一帧一帧的重绘（比如在1秒绘60帧就可绘出流畅的动画了）。
◼ 为了实现动画，我们需要一些可以定时执行重绘的方法。然而在Canvas中有三种方法可以实现：分别为 setInterval 、 setTimeout 和 requestAnimationFrame 三种方法来定期执行指定函数进行重绘。

1.2 Canvas 画出一帧动画的基本步骤（如要画出流畅动画，1s 需绘60帧）：
◼ 第一步：用 clearRect 方法清空 canvas ，除非接下来要画的内容会完全充满 canvas（例如背景图），否则你需要清空所有。
◼ 第二步：保存 canvas 状态，如果加了 canvas 状态的设置（样式，变形之类的），又想在每画一帧之时都是原始状态的话，
你需要先保存一下。
◼ 第三步：绘制动画图形（animated shapes），即绘制动画中的一帧。
◼ 第四步：恢复 canvas 状态，如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。

二、Canvas-绘制秒针-setInterval实现

2.1 setTimout定时器的缺陷
◼ setTimeout定时器不是非常精准的，因为setTimeout的回调函数是放到了宏任务中等待执行。
◼ 如果微任务中一直有未处理完成的任务，那么setTimeout的回调函数就有可能不会在指定时间内触发回调。
◼ 如果想要更加平稳和更加精准的定时执行某个任务的话，可以使用requestAnimationFrame函数。

// const image = new Image();
// image.src = "./bg.png";
function draw(context, count){
context.clearRect(0, 0, 320, 320);
context.save();
// 与restore 必须成对出现
// 画秒针
context.translate(160, 160);
context.rotate(Math.PI * 2 / 60 * count);
context.beginPath();
// 如果使用clearRect(),后面新绘制的路径，必须加 beginPath
context.moveTo(-15, 0);
context.lineTo(105, 0);
context.lineWidth = 6;
context.lineCap = "round";
context.strokeStyle = "red";
context.stroke();
context.restore();
// 与save必须成对出现
}
window.onload = function () {
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
let count = 0;
// context.drawImage(image, 0, 0);
draw(context, count);
setInterval(() => {
if (count > 60) {
count = 0;
}
count++;
draw(context, count);
}, 1000)
}

三、Canvas-绘制秒针-requestAnimationFrame实现

上一篇：反问：JS 的原型链存在的意义是什么？为什么这样设计？下一篇：canvas 实例方法: save() 和 restore() 的理解

发表评论

最新文章

热门笔记

可以直接扫码关注本站

易塔云建站：177-7785-8251

可以直接扫码关注本站