揭秘红宝书十八章：动画与Canvas图形

好的，以下是关于动画与Canvas图形的文章：

JavaScript 动画之源——Canvas

在 JavaScript 中，处理动画的两个好帮手就是 setInterval() 和 setTimeout()。与 setInterval() 相比，setTimeout() 的调用需要设置一个延时间隔，而在时间到之前，调用不会执行，这意味着对于动画创建来说，在使用 setTimeout() 时无法完全控制动画的执行间隔，但这并不妨碍我们使用它来创建动画。要说明这一点，我们可以看下面的例子：

// 创建动画1
let position = 0;
function move1() {
  position += 20;
  document.getElementById("circle1").style.left = position + "px";
  if (position >= 380) {
    clearInterval(timerId1);
  }
}
let timerId1 = setInterval(move1, 16);

// 创建动画2
let position = 0;
function move2() {
  position += 20;
  document.getElementById("circle2").style.left = position + "px";
  if (position >= 380) {
    clearInterval(timerId2);
  }
}
setTimeout(move2, 16); // 将函数作为参数传入
setTimeout(move2, 32);
setTimeout(move2, 48);

虽然使用 setInterval() 的定时动画比使用多个 setTimeout() 实现循环效率更高，但也不是没有问题。setInterval() 设置定时器的单位是毫秒，但 JavaScript 并不保证精度，这导致当浏览器标签处于非活动状态时，动画会变慢。

为了解决这个问题，requestAnimationFrame() 诞生了。requestAnimationFrame() 是一个 JavaScript 函数，它请求浏览器在下次重绘之前调用指定的函数。浏览器会尽力使重绘以 60 帧/秒的速度发生，这样，只要浏览器支持，使用 requestAnimationFrame() 创建的动画就可以达到每秒 60 帧的效果。使用 requestAnimationFrame() 创建动画的基本模式如下：

function animate(timestamp) {
  // 动画在这里发生
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

当然，你也可以使用 JavaScript 库或框架来创建动画，比如 jQuery、React 或 Vue。这些库或框架提供了创建动画的便捷方法，让开发人员无需直接操作 requestAnimationFrame()。

除了使用 requestAnimationFrame() 创建动画之外，我们还可以使用 Canvas 来创建动画。Canvas 是一种位图画布，我们可以直接在画布上进行绘制。使用 Canvas 创建动画的优点是，它可以完全控制动画的执行，而且可以创建出非常复杂的动画效果。使用 Canvas 创建动画的基本模式如下：

// 获取canvas元素
let canvas = document.getElementById("myCanvas");
// 获取canvas的上下文对象
let ctx = canvas.getContext("2d");

// 开始一个动画循环
function animate() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制动画
  // ...

  // 请求浏览器在下次重绘时调用animate()
  requestAnimationFrame(animate);
}

// 开始动画循环
animate();

动画与 Canvas 图形在网页开发中有着广泛的应用，比如创建游戏、创建交互式可视化效果、创建动画广告等。掌握这些技术，可以让你创建出更具吸引力的网页。