一、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实现
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;
draw(context, count);
function anim(){
const count = new Date().getSeconds();
// 此时浏览器根据刷新频率，每秒60次刷新
// 这60次刷新都是一个count值，获取的是当下的北京时间，是准确的
console.log("count is", count)
draw(context, count);
window.requestAnimationFrame(anim)
}
window.requestAnimationFrame(anim)
}
