arcTo用法
用法：arcto(x1, y1, x2, y2, radius)
说明：arcto()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2(x2,y2)所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果当前端点不是弧线起点，arcto()方法还将添加一条当前端点到弧线起点的直线线段。
arcTo()绘制
如上图，当前端点(20,20)、端点1（200，150），端点2（20，280）三点组成夹角绘制弧线，弧线半径为50并与夹角相切。当前端点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。
最后一段直线则是context.lineTo(200,280);绘制出来的，与arcTo绘制的弧线没有关系。
stroke()和fill()用法
stroke()：绘制已定义的路径
fill()：填充当前绘图路径
下面的代码中我用了两个画布，画图方法分别为drawCanvas1和drawCanvas2，以方便比较两者的区别。
stroke()、fill()用法
createPattern()用法
语法：createPattern(image, repetitionStyle)
说明：createPattern()方法用于创建一个表示将图像在当前图形上以什么样的方式进行重复平铺的CanvasPattern对象。参数image指定用于平铺的图像，该参数可以是一个Image对象，也可以是一个Canvas对象。参数repetitionStyle表示图像如何进行重复平铺，可能的值有repeat(在水平和垂直方向上均进行重复平铺，这也是默认值)、repeat-x(只在水平方向上重复平铺)、repeat-y(只在垂直方向上重复平铺)、no-repeat(只铺一次，不进行重复平铺)。
看下面的示例：
立即学习“前端免费学习笔记（深入）”；
createPattern()用法
注意二者的区别，仅仅在于矩形区域的起点坐标。第一个为canvas画布的起点坐标(0,0)，第二个起点为(30,30)。从效果来看第二幅图的第一个图像并不是完整的。
需要注意：CanvasPattern对象开始平铺图像的参考起点并不是我们当前绘制图形的左上角，而是整个canvas画布的左上角，确切地说，即canvas的起点坐标(0,0)。
createImageData和putImageData
语法：
createImageData(width,height);创建宽和高分别为width和height的ImageData 对象。返回ImageData对象。
createImageData(imageData);创建与指定的imageData对象相同的新的ImageData对象。返回ImageData对象。
putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
功能： 将图像数据（从指定的 ImageData 对象）放回画布上。
imgData：为需要放置在画布上的ImageData对象。
x：画布的左上角x坐标
y：画布的左上角y坐标
dirtyX,dirtyY,dirtyWidth,dirtyHeight四个参数可选，如果没有该四个参数，则将imageData从x、y坐标完整绘制在画布上；若有该四个参数，则保留imageData的dirtyX,dirtyY起始坐标，宽dirtyWidth、高dirtyHeight的部分图像。getImageData(x,y,width,height);x、y为开始复制的左上角位置的 x 坐标，width、height为将要复制区域的宽和高。返回ImageData 对象。
putImageData()用法
canvas2为使用toDataURL()方法，导出在canvas1元素上绘制的图像。
注意为什么画布二的矩形位置和画布一不一样？
因为toDataURL()导出的是整个画布，而画布二又是从（10，10）开始绘制的。
