关于canvas的方法和属性

获取 Canvas 对象
获取到 Canvas 的上下文环境的语法为：
canvas.getContext(contextType, contextAttributes);
上下文类型（contextType）：
2d（本小册所有的示例都是 2d 的）：代表一个二维渲染上下文
webgl（或"experimental-webgl"）：代表一个三维渲染上下文
webgl2（或"experimental-webgl2"）：代表一个三维渲染上下文；这种情况下只能在浏览器中实现 WebGL 版本2 (OpenGL ES 3.0)。

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 

绘制路径

方法	属性	描述
fill()		填充路径
stroke()		描边
arc(x,y,r,sAngle,eAngle,counterclockwise)	x：圆的中心的 x 坐标 y：圆的中心的 y 坐标 r：圆的半径 sAngle：起始角，以弧度计。（弧的圆形的三点钟位置是 0 度） eAngle：结束角，以弧度计。 counterclockwise：可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。	创建圆弧
rect(x,y,width,height)		创建矩形
fillRect(x,y,width,height)		绘制矩形路径区域
strokeRect(x,y,width,height)		绘制矩形路径描边
clearRect(x,y,width,height)		在给定的矩形内清除指定的像素
arcTo(x1,y1,x2,y2,r)	x1：弧的起点的 x 坐标 y1：弧的起点的 y 坐标 x2：弧的终点的 x 坐标 y2：弧的终点的 y 坐标 r：弧的半径	创建两切线之间的弧/曲线
beginPath()		起始一条路径，或重置当前路径
moveTo(x, y)		把路径移动到画布中的指定点，不创建线条
lineTo(x, y)		添加一个新点，然后在画布中创建从该点到最后指定点的线条
closePath()		创建从当前点回到起始点的路径
clip()		从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo(cpx,cpy,x,y)	cpx：贝塞尔控制点的 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 坐标	创建三次方贝塞尔曲线
isPointInPath(x, y)		如果指定的点位于当前路径中，则返回 true，否则返回 false

绘制直线的样式

样式	值	描述
lineCap	butt：默认。向线条的每个末端添加平直的边缘 round：向线条的每个末端添加圆形线帽 square：向线条的每个末端添加正方形线帽	设置或返回线条的结束端点样式
lineJoin	bevel：创建斜角round：创建圆角 miter：默认。创建尖角。	设置或返回两条线相交时，所创建的拐角类型
lineWidth	number：当前线条的宽度，以像素计	设置或返回当前的线条宽度
miterLimit	number：正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。 只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。	设置或返回最大斜接长度

颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离

设置渐变

方法	属性	描述
createLinearGradient(x0,y0,x1,y1)	x0：渐变开始点的 x 坐标 y0：渐变开始点的 y 坐标 x1：渐变结束点的 x 坐标 y1：渐变结束点的 y 坐标	创建线性渐变（用在画布内容上）
createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")	image：规定要使用的图片、画布或视频元素。	在指定的方向上重复指定的元素
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：在结束位置显示的 CSS 颜色值	规定渐变对象中的颜色和停止位置

图形转换

方法	属性	描述
scale(scalewidth,scaleheight)	scalewidth：缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推) scaleheight：缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)	缩放当前绘图至更大或更小
rotate(angle)	angle：旋转角度，以弧度计。如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。	旋转当前绘图
translate(x,y)	x：添加到水平坐标（x）上的值 y：添加到垂直坐标（y）上的值	重新映射画布上的 (0,0) 位置
transform(a,b,c,d,e,f)	a：水平缩放绘图 b：水平倾斜绘图 c：垂直倾斜绘图 d：垂直缩放绘图 e：水平移动绘图 f：垂直移动绘图	替换绘图的当前转换矩阵
setTransform(a,b,c,d,e,f)	a：水平旋转绘图 b：水平倾斜绘图 c：垂直倾斜绘图 d：垂直缩放绘图 e：水平移动绘图 f：垂直移动绘图	将当前转换重置为单位矩阵，然后运行 transform()

图像绘制

方法	属性	描述
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)	img：规定要使用的图像、画布或视频 sx：可选。开始剪切的 x 坐标位置 sy：可选。开始剪切的 y 坐标位置 swidth：可选。被剪切图像的宽度 sheight：可选。被剪切图像的高度 x：在画布上放置图像的 x 坐标位置 y：在画布上放置图像的 y 坐标位置 width：可选。要使用的图像的宽度（伸展或缩小图像） height：可选。要使用的图像的高度（伸展或缩小图像）	向画布上绘制图像、画布或视频