canvas

图形

绘制路径Section

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

beginPath()  新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()  闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()  通过线条来绘制图形轮廓。

fill()  通过填充路径的内容区域生成实心的图形。

移动笔触

moveTo(x, y)  将笔触移动到指定的坐标x以及y上。

线

lineTo(x,y)  绘制一条从当前位置到指定x以及y位置的直线。

圆弧

arc(x,y,radius,startAngle,endAngle,anticlockwise); 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:  弧度=(Math.PI/180)*角度。

arcTo(x1,y1,x2,y2,radius) 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

二次贝塞尔曲线

quadraticCurveTo(cp1x,cp1y,x,y)  绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

色彩 color

fillStyle = color

strokeStyle = color;

透明度 transparency

globalAlpha = transparencyValue; 或者用rgba(0,0,0,0.5)

lineWidth = value 设置线条宽度

lineCap = type 设置线条末端样式

lineJoin = type 设置线条与线条间结合处的样式

lineDashOffset = value 设置虚线样式的起始偏移量

setLineDash(segments) 设置当前虚线样式。

getLineDash() 返回一个包含当前虚线样式，长度为非负偶数的数组

miterLimit = value  限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。

lineCap = [ 'butt','round','square']  设置线条的末端样式

文本

fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

ctx.font= value;  ctx.textAlign=value; ctx.textBaseline = value; ctx.direction = value; 

drawImage(img,x,y,width.height) 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

 

还没完，，，