JavaScript中有关于绘图API的基础知识（2）。

包括：循环、动画、WebGL。

创建循环

//使原点 (0, 0) 从画布左上顶点移动至画布正中心 。
ctx.translate(width/2,height/2);

一些 JavaScript 函数可以让函数在一秒内重复运行多次如window.requestAnimationFrame()。只有一个参数：每帧要运行的函数名。下一次浏览器准备好更新屏幕时，将会调用该函数。

如果该函数向动画中绘制了更新内容，则在函数结束前再次调用 requestAnimationFrame()，动画循环得以保留。

只有在停止调用 requestAnimationFrame() 时，或 requestAnimationFrame() 调用后、帧调用前调用了 window.cancelAnimationFrame() 时，循环才会停止。

注：动画结束后在主代码中调用 cancelAnimationFrame() 是良好习惯，可以确保不再有等待运行的更新。

一般地，在画布上制作动画需要以下步骤：

1. 清除画布内容（可用 fillRect() 或 clearRect()）。
2. （在需要时）用 save() 保存状态。（在进行下一步前保存所更新的设置，一般在复杂环境中用到）
3. 绘制动画图形。
4. 使用 restore() 恢复第 2 步中保存的状态。
5. 调用 requestAnimationFrame() 准备下一帧动画。

3D画布

WebGL 基于 OpenGL图形编程语言实现，可直接与 GPU通信

由于 3D 绘图的复杂性，大多数人写代码时会使用第三方 JavaScript 库（比如 Three.js、PlayCanvas 或 Babylon.js）。大多数库的原理都基本类似，提供创建基本的、自定义性状的功能、视图定位摄影和光效、表面纹理覆盖，等等。库负责 与 WebGL 通信，你只需完成更高阶工作。

接触任何一个库都意味着要学一套全新的API（这里是第三方的版本），但与纯 WebGL 编程都大同小异。