html5之canvasAPI

获取canvas对象

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

利用context来绘制canvas

属性

fillStyle  填充样式

strokeStyle 填充边框样式

lineWidth 指定线宽

globalCompositeOperation 设置图形的组合方式。

shadowOffsetX 阴影的横向位移量 

shadowOffsetY 阴影的纵向位移量

shadowColor 阴影的颜色

shadowBlur 阴影的模糊范围

font 字体

textAlign 文字水平对齐方式

textBaseline 文字垂直对齐方式。

方法

fillRect(x,y,width,height):  绘制矩形

strokeRect(x,y,width,height); 绘制矩形边框

beginPath(): 开始创建路径

arc(x,y,radius,startAngle,endAngle,anticlockwise) 绘制圆形路径 

PS: Math.PI 为180度。

closePath() 关闭路径

fill()  填充图形

stroke() 填充图形边框

moveTo(x,y) 将光标移动到指定坐标点

lineTo(x,y) 使用该方法绘制完直线之后，光标自动移动到lineTo方法的参数所指定的直线终点。

createLinearGradient(xStart,yStart,xEnd,yEnd) 绘制线性渐变

addColorStop(offset,color) 添加渐变的颜色 offset（颜色离开渐变起始点的偏移量0-1）

createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd) 绘制径向渐变

translate(x,y) 平移

scale(x,y) 扩大

rotate(angle) 旋转

transform(m11,m12,m21,m22,dx,dy) 修改变形矩阵

drawImage(image,x,y) 绘制图形

drawImage(image,x,y,w,h)

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 

createPattern(image,type)

getImageData(sx,sy,sw,sh)

putImageData(imageData,dx,dy,[dirtyX,dirtyY,dirtyWidth,dirtyHeight])

fillText(text,x,y,[maxWidth])

measureText(text)

save() 保存

restore() 恢复

toDataURL(type) 输出图片类型呢