html5 关于canvas的一切

画矩形
fillRect(x,y,width,height) : 画一个填充的矩形
strokeRect(x,y,width,height) : 为一个矩形描边
clearRect(x,y,width,height) : 清楚一个矩形的一部分并且设为透明
rect(x, y, width, height)
直接画矩形，当调用rect方法时moveTo会直接定位到(0,0)位置
画路径
beginPath() 创建路径的第一步是调用beginPath方法，返回一个存储路径的信息
closePath() 从当前的点到起始点闭合路径
stroke()描边路径
fill()填充路径
lineTo(x, y) 从上一个起点到(x,y)的点画线，上一个起点可以通过moveTo来指定，默认为原先路径的终点
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
画弧线
arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x,y)是圆弧的圆心，radius-半径, startAngle和endAngle是圆弧的开始和结束弧度（radians = (Math.PI/180)*degree)，anticlockwise为true的话是逆时针，否则为顺时针
使用图像
drawImage(image, x, y)image-图像对象
function draw() {
var ctx = document.getElementById(’canvas’).getContext(’2d’);
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = ‘images/backdrop.png’;
}
drawImage(image, x, y, width, height)width和height是目标canvas上图像的宽高
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight
image参数与前面一样，后面的四个参数是截取的参数，再后面的四个参数是目标canvas图像的位置以及宽高
应用样式和颜色
fillStyle = color 设置填充色
strokeStyle = color 设置描边色
color可以是css颜色值，一个渐变对象或一个模式对象
线条样式
lineWidth = value 线条宽度
lineCap = type 线条的端点类型可以是butt(默认),round和square
lineJoin = type 连接线的类型：round,bevel和miter(默认)
miterLimit = value 当设置miter时的选项
渐变
通过下面两个方法创建一个canvasGradient对象, 就可以把这个对象应用于fillStyle和strokeStyle属性了
createLinearGradient(x1,y1,x2,y2) （x1,y1)到(x2,y2)的渐变
createRadialGradient(x1,y1,r1,x2,y2,r2) (x1,y1,r1)的圆到(x2,y2,r2)的圆
addColorStop(position, color) 为canvasGradient对象添加颜色，position-[0,1]区间的值，代表添加颜色的位置，color-添加的颜色(如#fff, rgba(0,0,0,1)等）
模式
createPattern(image,type) image-Image对象，type:repeat,repeat-x, repeat-y, no-repeat 可以讲其应用与fillStyle或strokeStyle属性
阴影
shadowOffsetX = float 阴影x偏移
shadowOffsetY = float 阴影y偏移
shadowBlur = float 模糊度
shadowColor = color 阴影颜色
变换
保存和恢复
save() 当调用save，当前的画图状态被保存到斩中
restore()调用restore 最后一次存储的状态会被恢复
转移
translate(x, y) 移动canvas坐标
旋转
rotate(angle) angle是旋转的角度，旋转的中心是canvas坐标原点，可以通过translate来移动canvas的坐标
缩放
scale(x, y) x是水平方向的缩放因子，y是垂直方向的缩放因子，必须都为正数
变换
transform(m11, m12, m21, m22, dx, dy)
setTransform(m11, m12, m21, m22, dx, dy)
组合
globalCompositeOperation = type 设置不同形状的组合类型
type:(方的图形是已经存在的canvas内容，圆的图形是新的形状)
source-over(默认) - 在canvas内容上面画新的形状
destination-over
source-in
destination-in
source-out
destination-out
source-atop
destination-atop
lighter
darker
xor
copy