基本用法
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; // 阴影模糊范围
(未完待续...)
