参考 JavaScript 高级程序设计 第四版

这个元素会占据一块页面区域，让 JavaScript 可以动态在上面绘制图片。<canvas>最早是苹果公司提出并准备用在控制面板中的，随着其他浏览器 的迅速跟进，HTML5 将其纳入标准。目前所有主流浏览器都在某种程度上支持<canvas>元素。

requestAnimationFrame

requestAnimationFrame是canvas动画的基础

由来

浏览器知道 CSS 过渡和动画应该什么时候开始，并据此计算出正确的时间间隔，到时间就去刷新用户界面。但对于 JavaScript 动画，浏览器不知道动画什么时候开始。那么可以创造一个名为 RequestAnimationFrame() 的新方法，用以通知浏览器某些 JavaScript 代码要执行动画了。这样浏览器就可以在运行某些代码后进 行适当的优化。

requestAnimationFrame()方法接收一个参数，此参数是一个要在重绘屏幕前调用的函数。这个函数就是修改 DOM 样式以反映下一次重绘有什么变化的地方。为了实现动画循环，可以把多个 requestAnimationFrame()调用串联起来，就像以前使用 setTimeout()时一样:

function updateProgress() {
  var div = document.getElementById('status')
  div.style.width = parseInt(div.style.width, 10) + 5 + '%'
  if (div.style.left != '100%') {
    requestAnimationFrame(updateProgress)
  }
}
requestAnimationFrame(updateProgress)

因为 requestAnimationFrame()只会调用一次传入的函数，所以每次更新用户界面时需要再手 动调用它一次。同样，也需要控制动画何时停止。结果就会得到非常平滑的动画。

通过 requestAnimationFrame 节流

因为重绘是非常频繁的操作，所以最好是配合使用一个计时器来限 制操作执行的频率。这样，计时器可以限制实际的操作执行间隔，而 requestAnimationFrame 控制 在浏览器的哪个渲染周期中执行。下面的例子可以将回调限制为不超过 50 毫秒执行一次:

let enabled = true
function expensiveOperation() {
  console.log('Invoked at', Date.now())
}
window.addEventListener('scroll', () => {
  if (enabled) {
    enabled = false
    window.requestAnimationFrame(expensiveOperation)
    window.setTimeout(() => (enabled = true), 50)
  }
})

待续。。。