1. 基础知识

canvas元素的大小应该直接在元素里面设置（默认值是300*150），不要用css来控制：
canvas实际上有两套尺寸，一是元素本身的大小，二是元素绘图表面的大小。用元素属性设置width和height时，同时修改了两套尺寸。而用css修改时，只会改变元素本身的大小，当两者大小不一致时，浏览器会对绘图表面进行缩放，比例就不对了。

在设置canvas的宽高时，不能使用”px”后缀，虽然浏览器还是支持的，但是Canvas规范不接受。

Chrome Developer Tools
以编程的方式来启动和停止性能分析（在执行某几行代码时进行分析）：
console.profile() console.profileEnd()

性能分析：https://jsperf.com/

事件处理：将鼠标坐标转换为canvas坐标

让浏览器不再干预canvas的事件处理：preventDefault()

任何放入canvas元素主体部分的东西，只有浏览器在不支持canvas元素时，才会被显示出来。所以，要让html元素“嵌入”canvas中，采用css定位实现：
一、css中规定：采用绝对定位方式的元素将被绘制在采用相对定位方式的元素之上。所以，对canvas采用相对，对html采用绝对；
二、两个元素都采用相对或绝对，把html放置到canvas之后
三、两个元素都采用相对或绝对，添加z-index

canvas并不是图像，要想让用户实现向右击鼠标保存图片的效果，使用canvas的toDataURL()方法，可抓取canvas的快照
toDataURL()方法所返回的引用，指向了某个给定canvas元素的数据地址，可以将img元素的src属性设置为这个数据地址，就可以创建一幅表示canvas的图像了

2. 绘制

橡皮筋技术

填充路径时使用“非零环绕规则”（剪纸效果）：
从需要判断的区域出发，画一条足够长的线段（穿过该方向上的所有边），与边相交的地方计数，与顺时针相交，加一，与逆时针相交，减一。最终值是0，不填充，否则，填充。

在一个整像素的范围内绘制半个像素宽的线段是不可能的，所以版左右（上下）两个方向上的半像素都被扩展为一个像素。这样，在某两个像素的边界处绘制一条1像素宽的线段，那么该线段实际会占据2个像素的宽度。所以，取像素的.5的地方（一个整像素的中心点）开始绘制，才能绘出一个像素宽的线段。

线段的绘制：
beginPath()（清除当前路径中的所有子路径，开始一段新的路径）、moveTo()（该方法会向当前路径中加入一条仅包含一个点的子路径）、lineTo()、stroke()

很多时候在需要对图形就行平移、缩放、旋转的变换时，换个角度思考：变换坐标系会更加方便（rotate() scale() translate()）。
scale(-1, 1)可以绘制水平镜像
更强大的变换：transform() setTransform()

图像合成（叠加，有好几种模式）：如何将一个图形绘制到另一个图形之上

剪辑区域：是在canvas中由路径定义的一块区域，浏览器会将所有的绘图操作都限制在本区域内执行，默认情况下，剪辑区域的大小与canvas一致。（利用该技术可以实现很多效果：橡皮擦、伸缩式动画…）

3. 文本

像绘制图像一样，在对文本进行填充及描边操作时，除了使用纯色，还可以使用图案及渐变色

绘图环境对象的font属性也支持css3格式的字型语法，除了css特有的inherit和initial（设为这两个值，会悄无声息地失败）。设置line-height时会被忽略，canvas规定必须设置为normal

文本定位：textAlign（水平） textBaseline（垂直）

文本的度量：measureText()可以度量某个字符串的像素宽度（需要先设置好字型）

4. 图像与视频

可以选择绘制某幅图的全部或部分，可以在绘制的时候缩放或保持原样，可以将图片绘制在canvas中的任何地方，也可以操作每个像素的颜色和透明度