第 18 章 动画与 Canvas 图形

是 HTML5 最受欢迎的新特性。自身提供了一些 API，但并非所有浏览器都支持这些 API，其中包括支持基础绘图能力的 2D 上下文和被称为 WebGL 的 3D 上下文。

这个 updateAnimations()方法会周期性运行注册的动画任务，并 反映出每个任务的变化（例如，同时更新滚动新闻和进度条）。如果没有动画需要更新，则这个方法既 可以什么也不做，直接退出，也可以停止动画循环，等待其他需要更新的动画。

实现平滑动画最佳的重绘间隔为 1000 毫秒/60，大约 17 毫秒。以这个速度重绘可以实现最平 滑的动画，因为这已经是浏览器的极限了。

时间间隔的问题

随着的流行和 HTML5 游戏的兴起，开发者发现 setInterval()和 setTimeout()的不精确是个大问题。

requestAnimationFrame

Firefox 4 率先在浏览器中为 JavaScript 动画增加了一个名为 mozRequestAnimationFrame()方法的 API。这个方法会告诉浏览器要执行动画 了，于是浏览器可以通过最优方式确定重绘的时序。自从出现之后，这个 API 被广泛采用，现在作为 requestAnimationFrame()方法已经得到各大浏览器的支持。

requestAnimationFrame()方法接收一个参数，此参数是一个要在重绘屏幕前调用的函数。这个 18.1 使用 requestAnimationFrame 551 15 16 17 18 19 28 20 21 23 24 25 27 26 22 函数就是修改 DOM 样式以反映下一次重绘有什么变化的地方。

通过 requestAnimationFrame 节流

通过 requestAnimationFrame()递归地向队列 中加入回调函数，可以保证每次重绘最多只调用一次回调函数。这是一个非常好的节流工具。

基本的画布功能

• 1. 创建元素时至少要设置其 width 和 height 属性。与其他元素一样，width 和 height 属性也可以在 DOM 节点上设置，因此可以随时修改。整个元 素还可以通过 CSS 添加样式，并且元素在添加样式或实际绘制内容前是不可见的。
• 2. 要在画布上绘制图形，首先要取得绘图上下文。使用 getContext()方法可以获取对绘图上下文的 引用。对于平面图形，需要给这个方法传入参数"2d"，表示要获取 2D 上下文对象：

  let drawing = document.getElementById("drawing"); 
  // 确保浏览器支持<canvas> 
  if (drawing.getContext) { 
   let context = drawing.getContext("2d"); 
   // 其他代码
  } 
  

• 3.可以使用 toDataURL()方法导出元素上的图像。这个方法接收一个参数：要生成图像 的 MIME 类型（与用来创建图形的上下文无关）。例如，要从画布上导出一张 PNG 格式的图片，可以这 样做：

​ let drawing = document.getElementById("drawing"); // 确保浏览器支持 if (drawing.getContext) { // 取得图像的数据 URI let imgURI = drawing.toDataURL("image/png"); // 显示图片 let image = document.createElement("img"); image.src = imgURI; document.body.appendChild(image); }

绘制矩形

fillRect()方法用于以指定颜色在画布上绘制并填充矩形。接收 4 个参数：矩形 x 坐标、矩形 y 坐标、 矩形宽度和矩形高度。这几个参数的单位都是像素

绘制路径

须首先调用 beginPath()方法以表示要开始绘制新路径。然后，再调用下列方法来绘制路径。

moveTo(x, y)：不绘制线条，只把绘制光标移动到(x, y)。

// 创建路径

context.beginPath();

// 绘制内圆 context.moveTo(194, 100);