# 一、Canvas API
canvas API是H5标准中最复杂的部分， 它提供几种属性和方法，可以在canvas元素上创建图形应用
# 方法
以下方法专门用于调用canvas API
-
getContext(context)创建可绘制图形的画布上下文，接受两个值，2d和3d -
fillRect(x,y,width,height)绘制实心矩形 -
strokeRect(x,y,width,height)绘制矩形轮廓 -
clearRect(x,y,width,height)清除画布指定区域内容 -
createLinearGradient(x1,y1,x2,y2)创建一个线性渐变效果 -
createRadialGradient(x1,y1,r1,x2,y2,r2)创建一个放射渐变效果 -
addColorStop(position,color)用于声明渐变颜色position范围是0.0-1.0用于确定颜色开始变化位置 -
beginPath()开始一条新路径 -
closePath()在路径最后实现封闭该路径，它会生成一条直线，连接笔触的最后一个位置与路径的起点。如想要保持路径开放，使用fill()绘图，不用这个方法 -
stroke()用于创建路径轮廓 -
fill()用于绘制实心形状 -
clip()用于创建一个由路径定义的裁剪区域，只有在落入形状内的内容才绘制到画布上 -
moveTo(x,y)将虚拟笔触移到新位置，下一个方法会从改点的开始继续设置路径 -
lineTo(x,y)在新路径上添加一条直线 -
rect(x,y,width,height)在路径为(x,y)位置上添加width和height矩形 -
arc(x,y,radius,startAngle,endAngle,direction)在路径上添加一条弧线 ,x,y指定弧线的中心，角度单位为弧度，direction是一个表示顺时针或逆时针的布尔值。使用公式Math.PI/180x角度，将角度转换为半径 -
strokeText(text,x,y,max)直接在画布上绘制文字轮廓。可选参数，max声明文字最大尺寸 -
fillText(text,x,y,max)直接在画布上绘制实心文字。可选参数，max声明文字最大尺寸 -
translate(x,y)将画布原点移到点(x,y)处，原点（0,0）初始位置位于canvas所在区域的左上角 -
rorate(angle)这个方法可以使画布原点为中心发生旋转，角度必须是弧度。使用公式Math.PI/180x将角度转换为弧度 -
scale(x,y)改变画布比例 默认值是（1.0,1.0）这些值可以是负值 -
transform（m1,m2,m3,m4,dx,dy）修改画布的转换矩阵。新矩阵是基于之前的矩阵得到的 -
setTransform（m1,m2,m3,m4,dx,dy）修改画布的转换矩阵。重置之前的值，声明新的值 -
save()保存画布状态，包括转换矩阵、样式属性、裁剪遮罩 -
restore()恢复上一次保存的状态 -
drawImage()在画布上绘制图像
# 属性
canvas API专用属性列表
-
rect( x, y, width, height )绘制矩形 -
fillRect( x, y, width, height )绘制被填充的矩形 -
strokeRect( x, y, width, height )绘制矩形（无填充） -
clearRect( x, y, width, height )清除指定的矩形内的像素 -
fill()填充当前绘图（路径） -
stroke()绘制已定义的路径 -
beginPath()起始（重置）当前路径 -
moveTo( x, y )将笔触移动到指定的坐标(x,y) -
lineTo( x, y )绘制一条从当前位置到指定的坐标(x,y)的直线 -
clip()从原始画布剪切任意形状和尺寸的区域 -
quadraticCurveTo()创建二次贝塞尔曲线 -
bezierCurveTo()创建三次贝塞尔曲线 -
arc( x, y, radius, startAngle, endAngle, anticlockwise)绘制圆或圆弧 -
arcTo( x1, y1, x2, y2, radius)根据给定点画圆弧，再以直线连接两个点 -
isPointInPath( x, y )检测指定的点是否在当前路径中，在则返回true。 -
fillStyle设置或返回用于填充绘画的颜色、渐变或模式 -
strokeStyle设置或返回用于笔触的颜色、渐变或模式 -
shadowColor设置或返回用于阴影的颜色 -
shadowBlur设置或返回用于阴影的模糊级别 -
shadowOffsetX设置或返回阴影与形状的水平距离 -
shadowOffsetY设置或返回阴影与形状的垂直距离 -
lineCap设置或返回线条的结束点样式（butt、round、square） -
lineJoin设置或返回当两条线交汇时，边角的类型（bevel、round、miter） -
lineWidth设置或返回当前的线条宽度 -
miterLimit设置或返回最大斜接长度 -
createLinearGradient( x0, y0, x1, y1 )创建线性渐变 -
createPattern( image/canvas/video, repeat )在指定的方向内重复绘制指定的元素 -
createRadialGradient( x0, y0, r0, x1, y1, r1 )创建径向渐变 -
addColorStop( stop, color )规定渐变对象中的颜色和停止位置 -
font设置或返回文本内容的当前字体属性（和css的font一样） -
textAlign设置或返回文本内容的当前对齐方式 -
textBaseline设置或返回在绘制文本时使用的当前文本基线 -
fillText( text, x, y )在画布上绘制“被填充”的文本 -
