canvas画图

基本用法

canvas元素

<canvas id="canvas" width="400" height="400"></canvas>

获取绘图功能对象

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

canvas绘图方法

context.fill() // 填充
context.stroke() // 描边

context.fillStyle = " " // 填充颜色
context.strokeStyle = " " // 边框颜色
context.lineWidth = xx // 边框宽度

context.fillRect(x,y,width,height) // 绘制一个填充矩形
context.strokeRect(x,y,width,height) // 绘制一个描边矩形
context.clearRect(x,y,width,height) // 清除矩形区域

context.arc(x,y,radius,starAngle,endAngle,anticlockwise)
// 绘制圆或圆弧
// anticlockwise 逆时针方向

// 角度－弧度转换
function getRads (degrees) { 
    return (Math.PI * degrees) / 180; 
} 

// 弧度－角度转换
function getDegrees (rads) { 
    return (rads * 180) / Math.PI; 
}

context.beginPath() // 开启新路径
context.closePath() // 关闭路径

context.moveTo(x,y)
context.lineTo(x,y) // 绘制线段

渐变

线性渐变

var lg = context.createLinearGradient(xStart,yStart,xEnd,yEnd);
lg.addColorStop(offset,color);  //  offset:设定的颜色离渐变结束点的偏移量(0~1)

径向渐变

var rg = context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
rg.addColorStop(offset,color);

阴影

context.shadowOffsetX = num;  // 阴影的横向位移，默认0
context.shadowOffsetY = num;  // 阴影的纵向位移，默认0
context.shadowColor = 'color';  // 阴影的颜色
context.shadowBlur = num;  // 阴影的模糊范围（值越大越模糊）

绘制图像

绘图

context.drawImage(image,x,y);  
// Image对象
// 绘制图像的x坐标
// 绘制图像的y坐标

context.drawImage(image,x,y,w,h);
// Image对象
// 绘制图像的x坐标
// 绘制图像的y坐标
// 绘制图像的宽度
// 绘制图像的高度

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);  *选取图像的一部分矩形区域进行绘制
// Image对象
// 图像上的x坐标
// 图像上的y坐标
// 矩形区域的宽度
// 矩形区域的高度
// 画在canvas的x坐标
// 画在canvas的y坐标
// 画出来的宽度
// 画出来的高度

图像平铺

context.createPattern(image,type);
// type: no-repeat 不平铺  repeat-x 横向平铺  repeat-y 纵向平铺  repeat 全部平铺

图像裁剪

context.clip();
// 只绘制封闭路径区域内的图像
// 用法：先创建裁剪区域，再绘制图像
注意：之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态

绘制文字

context.fellText(text, x, y [, maxWidth]);  // 填充文字
context.strokeText(text, x, y [, maxWidth]);  // 描边文字
// 要绘制的文字
// 文字起点的x坐标
// 文字起点的y坐标
// 绘制的最大宽度（可选）

context.font = "是否加粗 字号 字体";  // 设置文字样式，默认10px sans-serif
context.textAlign = " ";  // 水平对齐方式 （start/end/right/center）
context.textBaseline = " ";  // 垂直对齐方式  （top、hanging、middle、alphabetic、ideographic、bottom）

var text = context.measureText(text);  // TextMetrics object
text.width;  // 得到字体宽度（像素）

保存和恢复状态

context.save();  // 保存当前context的状态、属性
context.restore();  // 恢复到保存前的状态、属性（重置）

平移、旋转和缩放

context.translate(x,y);  // 平移
context.rotate(angle);  // 旋转
context.scale(x,y);  // 缩放

图形组合

context.globalCompositeOperation = type; 
// type:
source-over(默认)：在原有图形上绘制新图形
destination-over: 在原有图形下绘制新图形
source-in: 显示新图形交集部分
destination-in: 显示原有图形交集部分
source-out: 显示新图形非交集部分
destination-out: 显示原有图形非交集部分
source-atop: 显示原有图形+新图形交集部分
destination-atop: 显示新图形+原有图形交集部分
lighter: 交集部分颜色叠加
xor: 交集部分清除
copy: 只保留新图形

绘制阴影

context.shadowOffsetX = num;  // 阴影X轴位移(默认0)
context.shadowOffsetY = num;  // 阴影Y轴位移(默认0)
context.shadowColor = "color";  // 阴影颜色
context.shadowBlur = num;  // 阴影模糊范围

(未完待续...)