基础部分

获取绘图对象

<canvas id=”canvas”></canvas>

var canvas = document.getElementById(‘canvas’);
var context = canvas.getContext(‘2d’);

状态设置

context.strokeStyle = '#058'; // 边框颜色
context.fillStyle = '#058';      // 填充颜色

context.lineWidth = 10;       // 边框的宽度
context.lineCap = 'butt';     // 线帽，就是线的开头和结尾的形状
// butt    默认
// round   多出半个圆
// square  多出半个正方形

context.lineJoin = 'miter';      // 线拐角的形状
// miter    默认，尖角
// bevel    平角
// round    圆角

context.miterLimit = 10;      // 当lineJoin=’miter’时才有效，用于设置线拐角时内角与外角的最大距离，超过这个大小时lineJoin会变成bevel值

绘制方法

context.stroke();            //绘制边框
context.fill();                //绘制形状

状态控制方法

beginPath()        // 开启一段全新的状态
closePath()        // 把最后一个点与起始点连接起来

context.save()        // 保存前面的状态
context.restore()    // 恢复状态

画直线（线属于边框）

context.moveTo(100, 100);   // 线的起点
context.lineTo(700, 700);   // 线的连接，把前一个点与当前点连接

画矩形

context.fillRect(x, y, width, height);     //实心矩形
context.strokeRect(x, y, width, height);    //空心矩形

画圆

context.arc(x, y, r, start, end, isRever);    // start代表开始的角度，end代表结束的角度，isRever代表是否反回来画，360度为2*Math.PI
context.fill() 或 context.stroke()

画圆弧

从 (x0, y0) 开始到 (x1, y1) 位置画弧线，半径为radius，直到与 (x1, y1) 和(x2, y2)组成的直线相切为止

context.moveTo( x0, y0 );
context.arcTo( x1, y1, x2, y2, radius);
context.stroke();

贝塞尔曲线

// 二次曲线
context.moveTo( x0, y0 );
context.quadraticCurveTo( x1, y1, x2, y2);
context.stroke();

可进入这网站进行调值 http://tinyurl.com/html5quadratic

// 三次曲线
context.moveTo( x0, y0 );
context.bezierCurveTo( x1, y1, x2, y2, x3, y3);
context.stroke();

可进入这网站进行调值 http://tinyurl.com/html5bezier

图像变化

context.translate(x, y)        // 位移
context.rotate(deg)         // 旋转
context.scale(sx, sy)       // 缩放
context.transform(scx, skx, sky, scy, x, y)    // 矩阵变换

scx和scy代表水平和垂直缩放，默认为1 skx和sky代表水平和垂直倾斜，默认为0 x和y代表水平和垂直偏移多少，默认为0

关于fillStyle（strokeStyle同理）

// 线性渐变
var style = context.createLinearGradient(startX, startY, endX, endY); 
// 径向渐变
var style = context.createRadialGradient(startX, startY, r0, endX, endY, r1); 

style.addColorStop(pos, color);  在pos点的颜色是color，上下渐变，pos的取值是0.0 -1.0

//背景图片
var style = createPattern( Images | | Canvas || Video , repeat-style)

context.fillStyle = style;

文字渲染

context.font = ‘bold 40px Arial’;

[ font-style ] [font-variant] [font-weight] [ font-size ] [ font-family ]

font-style：normal(默认) italic 斜体字 oblique 倾斜字体
font-variant：normal(默认) small-caps 小型大写字母

font-weight：normal(默认) lighter 更小 bold 粗体 bolder更粗

  现在的web对于normal和lighter样子是一样，bold和bolder一样

font-size：px(默认) em %
context.textAlign = left | center | right;
context.textBaseline = top | middle | bottom | alphabetic(默认) | ideographic | hanging;
- alphabetic 是基于英文为基准线
- ideographic 是基于汉语为基准线
- hanging 基于印度语为基准线

var fontWidth = context.measureText( text ).width; // 获得text字符串所占的宽度

context.fillText(text, x, y[, maxWidth]);

阴影

context.shadowColor = ‘#ccc’;   // 阴影颜色
context.shadowOffsetX = 20;     // X轴偏移量
context.shadowOffsetY = 20;     // Y轴偏移量
context.shadowBlur = 5;         // 模糊度

全局设置

context.globalAlpha = 0.5         全局设置透明度

context.gloabalCompositeOperation = ‘source-over’    全局设置图与图之间的遮盖方式

source-over 后绘制的遮盖前面绘制的
source-atop 后绘制的未遮盖部分被剪切
source-in 只显示后绘制的图像，未遮盖部分被剪切
source-out 只显示后绘制的图像，遮盖部分被剪切
destination-over 跟source相反，把后绘制的改成前面绘制的
destination-atop
destination-in
destination-out
lighter 后绘制跟前面绘制的重叠部分进行颜色重新计算
copy 只显示后绘制的
xor 后绘制跟前面绘制的重叠部分被挖空

剪切区域

context.arc(0, 0, 30, 0, 2*Math.PI);
context.clip();

后面绘制的东西只会在这个圆形范围里面显示

交互

context.clearRect(startX, startY, endX, endY); // 清空画布指定范围
context.isPointInPath( x, y ); // 判断(x , y)位置是否有绘制东西
canvas.getBoundingClientRect().left    // 获取画布距离浏览器左边的距离

绘制图像

context.drawImage( image, x, y); 
context.drawImage( image, x, y, w, h);
context.drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh);    s开头是操作源图像

context.getImageData(0, 0, w, h); // 获取画布数据，属性data存着画布所有的像素点信息，是一个数组，数组长度为宽度*高度*4，其中这个4指rgba各个值

context.putImageData( imageData, dx, dy, dirtyX, dirtyY, w, h ); // 将数据导入画布

context.createImageData(w, h);    // 新建一个空白画布