canvas画图采坑

1）首先canvas的原点在画布的左上角上，有时候为了方便需要将原点平移，使用ctx.translate(x, y)函数；后面的坐标定位都是以这个点为基准

2）矩形，图像的距离原点的坐标以它们的左上角为起点

3）描边和填充是两个不同的概念，描边使用strokeStyle属性，调用stroke来实现；

填充使用fillStyle，调用fillRect()填充矩形，fillText()填充文字，fill()填充路径；填充和描边方法相当于渲染生成图像在屏幕上。

4）描绘路径的时候必须先使用ctx.beginPath()；ctx.moveTo表示将绘图点移动到此点，lineTo才是负责将上一点连接到下一点的路径，closePath()不必要显示关闭，调用fill(), stroke()都会自动闭合路径。

5）由于fillStyle等属性是全局的，所以需要借助栈结构来调用save()来存储上一次的画笔属性；调用restore()返回上一层画笔属性。

6）清除画布方法：clearRect(x,y,width,height)用来清除canvas画图上的以x，y为起点，width，height为宽高的矩阵区域。

7）操作图像数据：drawImage画上去之后使用getImageData来获取指定的位置的图像数据：

var imageData = ctx.getImageData().data // 里面每四个元素保存一个像素点的 r g b a的值

注意：图像必须是同域，否则会报跨域错误

8）合成：globalAlpha指定全局的透明度，globalCompositionOperation指定两个图形之间如何层叠。