Canvas API

使用Canvas进行图形绘制步骤：

1、获取Canvas对象；

2、从Canvas对象获取上下文；

3、使用上下文方法和属性进行绘制。

指定颜色方法：

1、以[#RRGGBB]方法指定：ctx.fillStyle = "#FF0000F" ;

2、以rbg()指定，0~255范围：ctx.fillStyle = "rbg(255,0,0)" ;    

3、同时指定透明度rbga()，透明度0~1的范围:ctx.fillStyle = "rbga(255,0,0,0.5)" ;

绘制路径：

1、取得上下文；

2、调用beginPath()方法开始；

3、调研moveTo()和lineTo()绘制和移动；

4、调研closePath()关闭路径绘制；

5、调研fill()方法进行图形绘制。

绘制圆弧：

arc方法：context.arc(x, y, 半径, 开始角度, 结束角度, 是否逆时针旋转) ；

arcTo方法：context.arcTo(x1, y1, x2, y2, 半径) ；

rect方法绘制矩形：context.rect(x, y, 宽度, 高度) ；

绘制图像：

1、读取图像文件；

2、进行绘制；

var image = new Image() ;

image.src = "url" ;

image.onload = function() {

     context.drawImage(image,dx,dy) ;        //把图像绘制在dx、dy

     context.drawImage(image,dx,dy,dw,dh) ;    //从原图dx、dy截取dw、dy

     context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) ;    //原图的sx、sy开始截取sw、sy绘制到dx、dy，宽高维dw、dh

}

变形方法：

变形矩阵指定（清空先前的）：setTransform(m11,m12,m21,m22,dx,dy) ;

变形矩阵指定（可重复选定）：transform(m11,m12,m21,m22,dx,dy) ;

旋转：rotate(angle) ;

扩大/缩小：scale(x,y) ;    //x，x轴比例，y，y轴比例

移动/变形：translate(x,y) ;    //移动后坐标