HTML5 Canvas标签总结

<canvas id="myCanvas" width="200" height="100"></canvas>

var c = document.getElementById("myCanvas");

var context = c.getContext("2d");

填充的矩形：

context.fillStyle = "#ff00ff";  //填充颜色

context.fillRect( x , y , width , height );

画直线：

context.moveTo( x , y );  // 起点

context.lineTo( x , y );  // 终点

context.stroke();  // 沿路径绘制直线

轮廓的矩形：

context.strokeStyle = "#ff00ff";  //填充颜色

context.strokeRect( x , y , width , height );

绘制圆：

context.beginPath();  //开始绘制路径

context.arc( x , y , radius , startAngle , endAngle , anticlockwise);  //开始绘制路径，（x , y ）起点；radius半径；startAngle 开始角度；endAngle 结束角度；anticlockwise是否按顺时针方向绘制（true/false）

context.closePath();  //结束绘制路径

清空画布：context.clearRect( x , y , width , height );

保存Canvas状态：context.save();

恢复Canvas状态：context.restore();

移动坐标空间：context.translate( dx , dy );

以原点为中心旋转Canvas：context.rotate(angle);

增减Canvas对象中像素数目（缩放）：context.scale( x , y );

两个图案叠加情况：context.globalCompositeOperation = "sourse-over";

source-over        destination-over

source-atop        destination-atop

source-in        destination-in

source-out        destination-out

var ctx = document.getElementById('myCanvas').getContext('2d');

ctx .clip();  //裁切路径

ctx.lineWidth = value;   //线条粗细

ctx.lineCap = type;   //线条两端样式

ctx.lineJoin = type;   //两线段连接处样式

ctx.miterLimit= value;   //绘制交点方式

线性渐变：

var lingrad = ctx.createLinearGradient( 0 , 0 , 0 , 200 );

//( 0,0)渐变起点，( 0,200)渐变终点

lingrad.addColorStop( 0 , '#ff0000'); //定义色标位置及上色

径向渐变：

var radialgradient = ctx.createRadialGradient( 100,100,30,100,100,200);

//(100,100)原点1，30半径1； (100,100)原点2，200半径2

阴影：

context.shadowOffsetX = float;    //阴影水平偏移

context.shadowOffsetY = float;    //阴影垂直偏移

context.shadowBlur = float;    //阴影羽化程度

context.shadowColor = color;    //阴影颜色