1. 绘制基本图形
-----上下文----------------------------------------------------------
canvas.getContext('2d') 获取上下文
ctx.save() 保存当前上下文
ctx.restore() 恢复至上次保存的上下文
-----路径 ----------------------------------------------------------
ctx.beginPath() 开始绘制新路径
ctx.closePath() 结束当前路径
ctx.moveTo(x,y) 移动绘制点至x,y
ctx.lineTo(x,y) 从当前点绘制到x,y的线
------样式-------------------------------------------------------------
ctx.fillStyle 设置图形填充的颜色
ctx.strokeStyle 设置图形边框的颜色
-----线条样式 -----------------------------------------------------------
ctx.lineWidth 设置图形边框的宽度
ctx.lineCap 线条末端样式,可为round / butt / sqare
ctx.lineJoin 两条线交汇边角的类型,可为bevel|round|miter
ctx.lineLimit 两线夹角长度,只有当 lineJoin 属性为 "miter" 时,miterLimit 才有效。
-----填充&绘制----------------------------------------------------------
ctx.fill() 填充图形
ctx.stroke() 绘制图形,一般填充在绘制前面,避免填充遮挡宽度
-----转换----------------------------------------------------------
ctx.translate(x,y) 将图形起始坐标移至x,y
ctx.rotate(angle) 将图形旋转angle角度(弧度制)
ctx.scale(x,y) 将图形X轴缩放x倍,Y轴缩放y倍
ctx.transform(a,b,c,d,e,f) 将图形进行矩阵变换,a,b水平缩放、倾斜,c,d垂直倾斜、缩放,e,f水平、垂直移动图形,矩阵变换可叠加
ctx.setTransform(a,b,c,d,e,f) 将图形变换矩阵重置为指定矩阵
1.1 绘制线条
var canvas = document.getElementById('demo');
canvas.width = 800;
canvas.height = 800;
var ctx = canvas.getContext('2d'); ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,200);
ctx.lineTo(100,300);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.strokeStyle = "#CC0000"; // 设置线的颜色
ctx.lineJoin = "miter"; //两条线交汇边角的类型,可为bevel|round|miter
ctx.lineLimit = 15;//两条线交汇处内角和外角之间的距离,只有当 lineJoin 属性为 "miter" 时,miterLimit 才有效。 ctx.closePath();
ctx.stroke();
1.2 绘制矩形
ctx.rect(x1, y1, x2, y2); 绘制左上角坐标x1,y1 右下角坐标x2,y2的矩形
ctx.fillRect(x1, y1, x2, y2); 绘制左上角坐标x1,y1 右下角坐标x2,y2的填充矩形
ctx.strokeRect(x1, y1, x2, y2); 绘制左上角坐标x1,y1 右下角坐标x2,y2的无填充矩形
ctx.clearRect(x1, y1, x2, y2); 清楚左上角坐标x1,y1 右下角坐标x2,y2的矩形内图像
ctx.rect(0,20,100,100); ctx.fillStyle = "red";
ctx.fillRect(120,20,100,100); ctx.strokeStyle = "black";
ctx.lineWidth = 10;
ctx.strokeRect(250,20,300,100); ctx.fill();
ctx.stroke(); ctx.clearRect(100,50,50,50);//清除某个矩形区域的内容
1.3 绘制圆形&扇形
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); x和y参数是圆心坐标,radius是半径,
startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示),
anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)
ctx.beginPath();
ctx.lineWidth = 2;
ctx.arc(100,100,50,Math.PI * 0.5,Math.PI * 2,true); ctx.closePath();//不结束路径,就只绘制弧线
ctx.stroke();
1.4 绘制五角星
ctx.beginPath();
for(var i = 0 ; i < 5 ; i ++){
ctx.lineTo(Math.cos((18 + i*72)/180 * Math.PI) * 20,
-Math.sin((18 + i*72)/180 * Math.PI) * 20);
ctx.lineTo(Math.cos((54 + i*72)/180 * Math.PI) * 20 * 0.5,
-Math.sin((54+ i*72)/180 * Math.PI) * 20 * 0.5);
}
ctx.closePath();
1.5 绘制渐变色
createLinearGradient(x1,y1,x2,y2) 绘制从x1,y1起始,x2,y2终止的线性渐变,例如(0,0,0,100)从上至下的线性渐变,(0,0,100,0)从左至右
addColorStop(stop,color) 从stop(介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置)换颜色渐变
createRadialGradient(x1,y1,x2,y2) 绘制从x1,y1起始,x2,y2终止的线性渐变,例如(0,0,0,100)从上至下的线性渐变,(0,0,100,0)从左至右
var myGradient = ctx.createLinearGradient(0, 0, 500, 0); //从上至下的线性渐变 myGradient.addColorStop(0, "#000");
myGradient.addColorStop(1, "#fff"); ctx.fillStyle = myGradient;
ctx.fillRect(10,10,500,500);
var myGradient = ctx.createRadialGradient(400, 400, 0,400, 400,200); //从上至下的径向渐变 myGradient.addColorStop(0, "#000");
myGradient.addColorStop(1, "#fff"); ctx.fillStyle = myGradient;
ctx.fillRect(10,10,600,600);
1.6 阴影
ctx.shadowOffsetX 阴影距形状的水平距离
ctx.shadowOffsetY 阴影距形状的垂直距离
ctx.shadowBlur 阴影的模糊级别
ctx.shadowColor 阴影的颜色
ctx.shadowOffsetX = 10; // 设置水平位移
ctx.shadowOffsetY = 10; // 设置垂直位移
ctx.shadowBlur = 5; // 设置模糊度
ctx.shadowColor = "rgba(0,0,0,0.2)"; // 设置阴影颜色 ctx.fillStyle = "#CC0000";
ctx.fillRect(10,10,200,100);
1.7 绘制文本
ctx.font 当前字体属性
ctx.textAlign 对齐方式,包括center|end|left|right|start
ctx.textBaseline 当前文本基线 ,包括alphabetic|top|hanging|middle|ideographic|bottom
ctx.fillText() 绘制“被填充的”文本
ctx.strokeText(text,x,y,maxWidth) 绘制文本(无填充),text文本,x,y文本坐标,maxWidth 文本最大宽度
ctx.measureText(text,x,y,maxWidth) 返回包含指定文本宽度的对象
// 在位置 250 创建红色基线
ctx.strokeStyle="red";
ctx.moveTo(250,20);
ctx.lineTo(250,200);
ctx.stroke(); // 创建渐变
var gradient=ctx.createLinearGradient(0,0,800,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red"); ctx.fillStyle = gradient;
ctx.font="30px Arial";
// 显示不同的 textAlign 值
ctx.textAlign="start";
ctx.fillText("textAlign=start",250,60,120); ctx.textAlign="end";
ctx.fillText("textAlign=end",250,90); ctx.textAlign="left";
ctx.fillText("textAlign=left",250,120); ctx.textAlign="center";
ctx.fillText("textAlign=center",250,150); ctx.textAlign="right";
ctx.strokeText("textAlign=right",250,180);