canvas手册
在手册启动之前先解析一个基础画布的通用条件：
例子：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
首先需要有一个标签，在该标签上添加id方便查找，
在查找到该dom后使用getConetext() 方法返回一个用于在画布上绘图的环境。当前唯一的合法值是“2d”,它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。
颜色、样式和阴影
| 属性 | 描述 | 属性值 |
|---|---|---|
| fillStyle=color|gradient|pattern | 设置或返回用于填充绘画的颜色、渐变或模式 | color指示绘图填充颜色，gradient用于填充绘图的渐变对象，pattern用于填充绘图的pattern对象 |
| strokeStyle=color|gradient|pattern | 设置或返回用于笔触的颜色、渐变或模式 | color指示绘图填充颜色，gradient用于填充绘图的渐变对象，pattern用于填充绘图的pattern对象 |
| shadowColor=color | 设置或返回用于阴影的颜色 | 用于阴影的css颜色值 |
| shadowBlur=number | 设置或返回用于阴影的模糊级别 | 阴影的模糊级别 |
| shadowOffsetX=number | 设置或返回阴影与形状的水平距离 | 正值或负值，定义阴影与形状的水平距离。 |
| shadowOffsetY=number | 属性设置或返回阴影与形状的垂直距离 | 正值或负值，定义阴影与形状的垂直距离。 |
| 方法 | 描述 | 参数描述 |
|---|---|---|
| createLinearGradient(x0,y0,x1,y1) | 创建线性渐变（用在画布内容上） | x0 渐变开始点的x坐标，y0 渐变开始点的y坐标，x1 渐变结束的x坐标，y1 渐变结束点的y坐标 |
| createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") | 在指定的方向内重复指定的元素 | imgage 规定要使用的模式的图片、画布或视频元素，repeat 默认。该模式在水平和垂直方向重复，repeat-x 该模式只在水平方向重复，repeat-y 该模式只在垂直方向重复，no-repeat 该模式只显示一次（不重复） |
| createRadialGradient(x0,y0,r0,x1,y1,r1) | 创建发射状/环形的渐变（用在画布内容上） | x0 渐变的开始圆的x坐标，y0渐变的开始圆的y坐标，r0开始圆的半径，x1渐变的结束圆的x坐标，y1渐变的结束圆的y坐标， r1结束圆的半径 |
| addColorStop(stop,color) | 规定渐变对象中的颜色和停止位置 | stop 介于0.0与1.0之间的值，表示渐变中开始与结束之间的位置。 color 在stop位置显示的Css颜色值。 |
线条样式
| 属性 | 描述 | 参数介绍 |
|---|---|---|
| lineCap="butt|round|square" | 设置或返回线条的结束端点样式 | butt 默认值。向线条的每个末端添加平直的边缘，round 向线条的每个末端添加圆形线帽，square 向线条的每个末端添加正方形线帽 |
| lineJoin="bevel|round|miter" | 设置或返回两条线相交时，所创建的拐角类型 | bevel 创建斜角，round 创建圆角，miter 默认值。创建尖角 |
| lineWidth=number | 设置或返回当前的线条宽度 | number 当前线条的宽度，以像素计。 |
| miterLimit=number | 设置或返回最大斜接长度 | number 正数。规定最大斜接长度。如果斜接长度超过miterLimit的值，边角会以lineJoin的“bevel”类型来显示。 |
矩形
| 方法 | 描述 | 参数介绍 |
|---|---|---|
| rect(x,y,width,height) | 创建矩形 | x矩形左上角的x坐标, y矩形左上角的y坐标，width矩形的宽度,以像素计，height矩形的高度,以像素计。 |
| fillRect(x,y,width,height) | 绘制“被填充”的矩形 | x 矩形左上角的x坐标，y矩形左上角的y坐标，width矩形的宽度，height矩形的高度 |
| strokeRect(x,y,width,height) | 绘制矩形（无填充） | x 矩形左上角的x坐标，y矩形左上角的y坐标，width矩形的宽度，height矩形的高度 |
| clearRect(x,y,width,height) | 在给定的矩形内清除指定的像素 | x 要清除的矩形左上角的x坐标，y要清除的矩形左上角的y坐标，width 要清除的矩形的宽度，height 要清除的矩形的高度 |
路径
| 方法 | 描述 | 参数介绍 |
|---|---|---|
| fill | 填充当前绘图（路径） | 默认颜色是黑色，如果路径未关闭,那么fill()方法会从路径结束点到开始点之间添加一跳线，以关闭该路径(正如closePath()一样)，然后填充该路径。 |
| stroke() | 绘制已定义的路径 | 默认值是黑色，通过moveTo()和lineTo()方法定义的路径。 |
| beginPath() | 开始一条路径，或重置当前路径。 | 请使用stroke()方法在画布上绘制确切的路径。 |
| moveTo(x,y) | 把路劲移动到画布中的指定点，不创建线条。 | x路径的目标位置的x坐标，y路径的目标位置y坐标。 |
| closePath() | 创建从当前点回到起始点的路径 | 请使用stroke()方法在画布上绘制确切的路径，请使用fill()方法来填充图像（默认是黑色），请使用fillStyle属性来填充另一个颜色/渐变 |
| lineTo(x,y) | 添加一个新点，然后再画布中创建从该点到最后指定点的线条。 | x路径的目标位置的x坐标，y路径的目标位置的y坐标。 |
| clip() | 从原始画布剪切任意形状和尺寸的区域 | 一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其它区域），你也可以在使用clip()方法前通过使用save()方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过restore()方法） |
| quadraticCurveTo(cpx,cpy,x,y) | 创建二次贝塞尔曲线 | pcx贝塞尔控制点的x坐标,cpy贝塞尔控制点的y坐标, x结束点的x坐标, y结束点的y坐标 |
| bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) | 通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点 | cp1x第一个贝塞尔控制点的x坐标，cp1y第一个贝塞尔控制点的y坐标，cp2x第二个贝塞尔控制点的x坐标，cp2y第二个贝塞尔控制点的y坐标，x结束点的x坐标，y结束点的y坐标。 |
| arc(x,y,r,sAngle,eAngle,counterclockwise) | 方法创建弧/曲线（用于创建圆或部分圆），如需要通过arc()来创建圆,请把起始角设置为0,结束角设置为2Math.PI，请使用stroke()或fill()方法在画布上绘制实际的弧。 | x圆的中心的x坐标，y圆的中心的y坐标，r圆的半径，sAngle起始角，以弧度计（弧的圆形的三点钟位置是0度），eAngle结束角，以弧度计,counterclockwise可选。规定应该逆时针还是顺时针绘制。False=顺时针，true=逆时针。 |
| arcTo(x1,y1,x2,y2,r) | 创建两切线之间的弧/曲线 | x1两切线交点的横坐标，y1两切线交点的纵坐标，x2第二天切线上一点的横坐标，y2第二条切线上一点的纵坐标，r弧的半径 |
| isPointInPath(x,y) | 如果指定的点位于当前路径中，则返回true，否则返回false | x要测试的x坐标，y要测试的y坐标 |
转换
| 方法 | 描述 | 参数介绍 |
|---|---|---|
| scale(scalewidth,scaleheight) | 缩放当前绘图至更大或更小 | scalewidth缩放当前绘图的宽度（1=100%，0.5=50%，2=200%，依次类推），scaleheight缩放当前绘图的高度（1=100%，0.5=50%，2=200%，依次类推） |
| rotate() | 旋转当前绘图 | angle旋转角度，以弧度计。如需要将角度转为弧度，请使用degrees*Math.PI/180公式进行计算。实例：如需旋转5度，可规定下面的公式：5*Math.PI/180 |