canvas 小记

1.context的 getImageData 和putImageData 都是相对于canvas的，所以其是不受 绘图环境 context的矩阵影响的。

2.clip方法：将剪辑区域设置为 当前剪辑区域与当前路径的交集。在第一次调用clip方法之前，剪辑区域大小与整个canvas一致；因为clip方法会将剪辑区域设置为 当前剪辑区域与当前路径的交集，所以对该方法的调用一般都欧式嵌入save与resotre方法之间的，否则剪辑区域将会越变越小。

3.measureText所返回的textMetrics对象之中，唯一包含的度量值就是传递给该方法的字符串的宽度。这意味着必需自己来计算字符串的高度。幸好对于大多数字型来说，将字母“M”的宽度在稍微增加一点儿，就可以得出近似的文本高度了。即var h = context.measureText("W").width;return h + h / 6;

4.context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight); 

参数释义：dx,dy为整个imageData数据放置的位置坐标（偏移量）（单位：css像素/逻辑像素）；

                  dirtyX,dirtyY,dirtyWidth,dirtyHeight,为要粘贴的图像数据在imageData中的坐标及长宽（物理像素/设备像素）；

重点：可以理解为将imageData整个粘贴到目标context，且非粘贴的图像数据设置为透明像素；注意几个参数的单位不同；