HTML5 CANVAS制图 基础总结 一、基本绘图

首先，定义2D渲染变量ct（这里用了Jquery库）：va$(#canvasId).get(0).getContext('2d');以下是绘制各种基本图形的方法：

复制代码
//绘制矩形(填充/描框)
ct.fillRect(x,y,w,h)
ct.strokeRect(x,y,w,h)

//绘制路径--线条
ct.beginPath();
ct.moveTo(x0,y0);
ct.lineTo(x1,y1);
ct.closePath();
ct.stroke();

//绘制路径--圆弧
ct.beginPath();
ct.arc(x,y,r,start,end,true);
ct.closePath();
ct.fill();

//绘制文本
ct.font = "30px serif...";
ct.fillText(txt,x,y);
ct.strokeText(txt,x,y);

//设置样式
ct.fillStyle = "rgb(r,g,b)";
ct.strokeStyle = "rgb()";
ct.lineWidth = 5;
复制代码
还提供了一些灵活的方法：

//橡皮擦（擦除矩形范围）
ct.clearRect(x,y,w,h);

//重置样式
canvas.attr("width",w);


二、高级功能

以下是对画布的一些变换操作：

复制代码
ct.save()/restore() //保存/恢复
ct.translate(x,y) //平移
ct.scale(a,b) //放大、缩小
ct.rotate(Math.PI) //绕(0,0)旋转

//变换矩阵
ct.transform(xScale,ySkew,xSkew,yScale,xTrans,yTrans) 
ct.setTransform(xScale,ySkew,xSkew,yScale,xTrans,yTrans) //重置 
复制代码
关于变换矩阵，有一篇很好的文章可以加深你的理解：http://shawphy.com/2011/01/transformation-matrix-in-front-end.html

这是些常用的操作：

复制代码
ct.globalAlpha = 0.5 //透明度

//阴影
ct.shadowBlur = 20; //扩散
ct.shadowOffsetX = 10;
ct.shadowOffsetY = 10;
ct.shadowColor = rgba;

//渐变（线性/放射性）
ct.createLinearGradient(x,y,x1,y1)
ct.createRadialGradient(x,y,r,x1,y1,r1)
//设渐变的始终颜色
addColorStop(0,"rgb()")/(1,"rgb()");
复制代码
贝塞尔曲线绘制：

//最后两个参数是终点的坐标点
ct.beginPath();
ct.moveTo(50,250);
ct.quadraticCurveTo(250,100,450,250) //两次贝塞尔曲线
ct.bezierCurveTo(150,50,350,450,450,250) //三次贝塞尔曲线
ct.stroke();
画布导出为图像：

//生成图片的src地址
var imgURL = canvas.get(0).toDataURL();
//以下将画布替换为图片
var img = $("<img></img>");
img.attr("src",imgURL);
canvas.replaceWith(img);