详述canvas(二)/canvas绘图函数汇总

来源：http://blog.csdn.net/liuyan19891230/article/details/51243547

绘图路径:

beginPath() :开始路径 
closePath():闭合路径 
moveTo(x,y):将触笔移动到x,y点 
lineTo(x,y):绘制到x,y点 
stroke(): 触笔方法 画线 默认为黑色 
fill():填充方法 
rect(x,y,w,h):矩形路径 
save():保存路径 
restore():恢复路径

绘制矩形： 
fillRect(x,y,w,h) 填充实心矩形 
strokeRect(x,y,w,h) 绘制空心矩形 
clearRect(x,y,w,h) 清除矩形选区

设置绘图样式： 
fillStyle: 填充颜色 
strokeStyle: 触笔颜色 
lineWidth: 触笔宽度(线宽)

图形边界样式： 
lineJoin : 边界连接点样式 
miter(默认值),round(圆角),bevel(斜角) 
lineCap: 端点样式 
butt(默认值),round(圆角),square(高度多出线宽一半)

绘制圆形： 
arc(x,y,r,startAngle,endAngle,false) 
x,y 圆心坐标位置 
r 圆半径 
startAngle开始角度,以弧度表示 弧度公式:角度*PI/180 
endAngle结束角度,以弧度表示 弧度公式:角度*PI/180 
true/false 逆时针/顺时针绘图

绘制曲线 
arcTo(x1,y1,x2,y2,r) 
x1,y1 坐标一 x2,y2坐标二 r圆弧半径 
quadraticCurveTo(dx,dy,x1,y1) 
贝塞尔曲线:dx,dy控制点 x1,y1结束坐标 
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1) 
贝塞尔曲线:dx1,dy1控制点一 dx2,dy2控制点二 x1,y1结束坐标

canvas变换 
translate(x,y) 
坐标基准点偏移:从起始点为基准,移动到当前位置 
rotate(弧度):旋转 弧度公式:角度*PI/180 
scale(wb,hb)缩放比例(缩放canvas绘制的图片)

绘制图片 
图片预加载，获取图片文件 
onload中调用 
drawImage(img,x,y,w,h);绘制图片(图片,坐标x,坐标y,宽度,高度)

设置背景 
createPattern(img,平铺方式) 
平铺方式:repeat,repeat-x,repeat-y,no-repeat

颜色渐变 
线性渐变:createLinearGradient(x1,y1,x2,y2) 
x1,y1起始坐标点 
x2,y2结束坐标点 
径向渐变:createRadialGradient(x1,y1,r1,x2,y2,r2) 
x1,y1,r1内圆坐标及半径 
x2,y2,r2外圆坐标及半径 
addColorStop(位置,颜色) 
位置:渐变点 0-1之间 可多个

绘制文本 
strokeText(文本,x,y); 绘制空心文本 
fillText(文本,x,y); 绘制实心文本 
font = “font-size font-family” 注:尺寸 字体缺一不可 
textAlign = “”;文本左右对齐方式 
start center end left right 
textBaseline文本上下对齐方式 
alphabetic 默认。文本基线是普通的字母基线。 
top 文本基线是 em 方框的顶端。。 
hanging 文本基线是悬挂基线。 
middle 文本基线是 em 方框的正中。 
ideographic 文本基线是表意基线。 
bottom 文本基线是 em 方框的底端。 
measureText(文本).width; 文本实际宽度(只有宽度值)

阴影 
shadowOffsetX,shadowOffsetY x轴、y轴偏移 
shadowBlur 阴影模糊度 
shadowColor 阴影颜色 
默认颜色:rgba(0,0,0,0)

像素 
createImageData(sx,sy) 
创建新的、空白的 ImageData 对象 
getImageData(x1,y1,sx,sy) 
返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 putImageData(img,x2,y2) 
把图像数据（从指定的 ImageData 对象）放回画布上

合成 
globalAlpha设置或返回绘图的当前 alpha 或透明值 
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上 
source-over默认。在目标图像上显示源图像。 
source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 
source-in在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。 
source-out在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。 
destination-over在源图像上方显示目标图像。 
destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。 
destination-in在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。 
destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。 
lighter显示源图像 + 目标图像。 
copy显示源图像。忽略目标图像。 
xor使用异或操作对源图像与目标图像进行组合。

将画布导出为图片 
火狐、谷歌浏览器右键菜单可直接导出为图片 
toDataURL 
事件 
isPointInPath(x,y) 
如果指定的点位于当前路径中，返回布尔值 
只能判断最后绘制出来的图片