这是我参与「第五届青训营 」笔记创作活动的第5天。
简介
canvas可以通过js在HTML的各种标签上绘制图案，可以绘制路径，矩形，圆形，字符以及图片，在某些情况下可以 “代替” 图片，可用于动画、游戏、数据可视化、图片编辑器、实时视频处理等领域。
教程+实例
事件处理 鼠标，键盘，触摸，由于 canvas 是作为一个整体画布存在，所有的内容只不过是其内部渲染的结果，我们不能像在 dom 元素上监听事件一样，在 canvas 所渲染的图形内绑定各种事件，因此基于 canvas 画布开发出一套交互式应用是件复杂的事情。
给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。
我们可以通过 new 操作符生成一个个的 Shape 实例，并可在实例上监听各类事件，然后再将它们add进Stage。
数学知识
如果想用canvas实现一些有趣的功能，那么必须要很好地了解一些基本的数学知识，尤其是代数方程、三角函数及向量运算。如果要编写类似电子游戏那样更为复杂的应用程序，那么还需要掌握如何根据给定的计量单位来推导等式。
代数方程
三角函数
向量运算
根据计量单位来推导等式
动画 用 canvas 做动画的最大的限制可能就是图像一旦绘制出来，想要移动它，就不得不对所有东西（包括之前的）进行重绘。 绘制每一帧的步骤：
- 清空 canvas：比如
clearRect方法 - 保存 canvas 状态：
save() - 绘制动画帧
- 恢复 canvas 状态：
restore()在 canvas 上绘制内容是用 canvas 提供的或者自定义的方法，而通常，我们仅仅在脚本执行结束后才能看见结果，比如说，在 for 循环里面做完成动画是不太可能的。
因此，为了实现动画，我们需要一些可以定时执行重绘的方法。有两种方法可以实现这样的动画操控。首先可以通过 setInterval 和 setTimeout 方法来控制在设定的时间点上执行重绘。
如果你并不需要与用户互动，你可以使用 setInterval() 方法，它就可以定期执行指定代码。如果我们需要做一个游戏，我们可以使用键盘或者鼠标事件配合上 setTimeout() 方法来实现。通过设置事件监听，我们可以捕捉用户的交互，并执行相应的动作。
动画文档
精灵
物理效果
游戏开发
