canvas手册

在手册启动之前先解析一个基础画布的通用条件：
例子：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

首先需要有一个<canvas></canvas>标签，在该标签上添加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
translate(x,y)	重新映射画布上的（0,0）位置	x添加到水平坐标(x)上的值，y添加到垂直坐标(y)上的值。
transform(a,b,c,d,e,f)	替换绘图的当前转换矩阵	a水平缩绘图，b水平倾斜绘图,c垂直倾斜绘图，d垂直缩放绘图，e水平移动绘图，f垂直移动绘图
setTransform(a,b,c,d,e,f)	将当前转换重置为单位矩阵。然后运行transform()	a水平缩放绘图，b水平倾斜绘图，c垂直倾斜绘图，d垂直缩放绘图，e水平移动绘图，f垂直移动绘图

文本

属性	描述	参数介绍
font	设置或返回文本内容的当前字体属性	font属性使用的语法与CSS font属性相同
textAlign="center|end|left|right|start"	设置或返回文本内容的当前对齐方式	start默认值。文本在指定的位置开始，end文本在指定的位置结束，center文本的中心被放置在指定的位置，left文本在指定的位置开始，right文本在指定的位置结束。
textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"	设置或返回在绘制文本时的当前文本基线	alphabetic默认。文本基线是普通的字母基线，top文本基线是em方框的顶端，hanging文本基线是悬挂基线，middle文本基线是em方框的正中，ideographic文本基线是表意基线，bottom文本基线是em方框的底端。
fillText(text,x,y,maxWidth)	在画布上绘制“被填充的”文本	text规定在画布上输出的文本，x开始绘制文本的x坐标位置（相对于画布），y开始绘制文本的y坐标位置（相对于画布），maxWidth可选。允许的最大文本宽度\，以像素计。
strokeText(text,x,y,maxWidth)	在画布上绘制文本（无填充）	text规定在画布上输出的文本，x开始绘制文本的x坐标位置（相对于画布）,y开始绘制文本的y坐标位置（相对于画布）,maxWidth可选。允许的最大文本宽度，以像素计。
measureText(text).width	该方法返回一个对象，该对象包含以像素计的指定字体宽度	text要测量的文本

图像绘制

方法	描述	参数介绍
drawImage（img,x,y）	向画布上绘制图像\，画布或视频	在画布上定位图像，img规定要使用的图像\、画布或视频，x在画布上放置图像的x坐标位置，y在画布上放置图像y坐标位置。
drawImage(img,x,y,width,height)	在画布上定位图像，并规定图像的宽度和高度	规定要使用的图像、画布或视频，x在画布上放置的x坐标，y在画布上的y坐标，width要使用的图像的宽度，height要使用的图像的高度。
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)	剪切图像，并在画布上定位被剪切的部分	img规定要使用的图像、画布或视频，sx开始剪切的x坐标位置，sy开始剪切的y坐标位置，swidth被剪切图像的宽度，sheight被剪切图像的高度，x在画布上放置的x坐标位置，y在画布上放置图像的y坐标位置，width要使用的图像的宽度（伸展或缩小图像）,heigth要使用的高度（伸展或缩小图像）。

像素操作1

属性	描述
width	返回ImageData对象的宽度。
height	返回ImageData对象的高度。
data	返回一个对象，包含指定的ImageData对象的图像数据。

像素操作2

方法	描述	参数介绍
createImageData(width,height)	创建新的 、空白的ImageData对象	width是ImageData对象的宽度\，以像素计。height是ImageData对象的高度
getImageData(x,y,width,height)	返回ImageData对象，该对象拷贝了画布指定矩形的像素数据。	x开始复制的左上角位置的x坐标（以像素计），y开始复制的左上角位置的y坐标（以像素计）,width要复制的矩形区域的宽度，height要复制的矩形区域的高度。
putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)	把图像数据从指定的ImageData对象放到画布上	imgData规定要放到画布的ImageData对象，x是ImageData对象左上角的x坐标\，以像素计，y是ImageData对象左上角的y坐标,以像素计，dirtyX水平值（x）,在画布上放置图像的位置，dirtyY垂直值（y）,在画布上放置图像的位置，dirtyWidth在画布上绘制图像所使用的宽度，dirtyHeight在画布上绘制图像所使用的高度。

合成

属性	描述	介绍
globalAlpha=number	设置或返回绘制图的当前alpha或透明值	number透明值。必须介于0.0~1.0之间。
globalCompositeOperation="source-in"	设置或返回新图像如何绘制到已有的图像上	source-over默认。在目标图像上显示源图像，source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。source-in在目标中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。source-out在目标图像之外显示源图像。只有目标图像之外的源图像部分，目标图像是透明的。 destination-over在源图像上显示目标图像。

其它

方法	描述	介绍
save()	保存当前环境的状态。
restore()	返回之前保存过的路径状态和属性
createEvent()
getContext()
toDataURL()