（一）Canvas 基础

（1） canvas 使用基本流程
都是先获取其 canvas 索引，然后获取其绘图环境 context。之后使用绘图环境进行一系列绘图动作。

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
...

你可以扩充 2d 绘图环境对象（context）的功能。

（2） canvas 的宽高
canvas 存在元素宽高（css）与画布宽高。
元素宽高：无默认值，设置方法 canvas.style.width/canvas.style.height，单位正常，表现为其容器大小。
画布宽高：默认为 300*150,设置方法:canvas.width/canvas.height，无单位（不能使用单位）但却类似于px，表现为画出图形的分辨率。

画布宽高如果不加以设置可能会自动缩放（但始终为默认值）以适应容器大小（即分辨率可能会有所不符）。

（3） canvas 的绘图环境状态保存与恢复
可以通过 context.save() 和 context.restore() 进行类似于堆栈式保存与恢复（绘图环境）状态。注意，这个意思不是恢复前一帧图片，恢复的是绘图设置（如字体颜色等）。
（4） canvas 同样可以对图像表面进行保存与恢复
绘图软件原理。
（5） canvas 是立即模式绘图系统
就是无记忆模式的绘图机制。
有记忆的叫做保留模式。
相比之下，立即模式的绘图系统是一种更加底层的模式。
（6） canvas.innerHTML
canvas 元素中的内容只有在不支持 canvas 的浏览器中才会展示。所以如果你要实现类似往 canvas 当中添加元素的效果，你只能通过 css 设置 position 和 z-index 配合以达到目的。
（7）离屏 canvas
也就是通过设置 canvas.style.display="none"，使其不可见，使用其功能并通过 canvas.toDataURL() 方法展现出来。也可以使用另一种

document.createElement("canvas");

来实现。

（二）基础数学

（1）一般代数方程
（2）三角函数
包括弧度、正弦余弦正切
（3）向量运算
包括向量相加减、点积。

（三）基本特性 / 核心原理（操作）

【像素扩展法则】要想绘制一个真正宽度为1px的线段，就要将之绘制到像素格中间。
【多边形绘制原理】利用 lineTo 和 moveTo 配合三角函数好好计算。
【图形点击事件相应原理】 利用当前图形的绘制路径判断 context.isPointInPath(x,y) 用以判断是否点进来了。（有重叠先后顺序）