路径
- 开始建立路径:beginPath()
- 向路径集合中添加子路径:
moveTo(x,y);
形状;closePath()
可选
- 显示路径:填充fill() ,描边stroke()
子路径
- 直线:
lineTo(x,y);
- 圆弧:
arc(x,y,半径,开始弧度,结束弧度,方向)
- 切线圆弧:
arcTo(x1,y1,x2,y2,半径)
- 二次贝塞尔曲线:
quadraticCurveTo(cpx1,cpy1,x,y)
- 三次贝塞尔曲线:
bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
- 矩形:
rect(x,y,w,h)
理解路径和子路径
路径:
- 路径是子路径的集合
- 一个上下文对象同时只有一个路径,想要绘制新的路径,就要把当前路径置空。
- beginPath() 方法当前路径置空,也就是将路径恢复到默认状态,让之后绘制的路径不受以前路径的影响。
子路径:
- 子路径是一条只有一个起点的、连续不断开的线
- moveTo(x,y) 是设置路径起点的方法,也是创建一条新的子路径的方法
- 路径里的第一条子路径可以无需设置起点,它的起点默认是子路径中的第一个点
注:rect(x,y,w,h) 绘制路径时,会具备moveTo() 功能。
画直线
- lineTo(x,y)
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(400, 50);
ctx.closePath();
ctx.stroke();
画直角三角形
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(400, 50);
ctx.lineTo(400, 250);
ctx.closePath();
ctx.stroke();
画圆弧
- arc(x,y,半径,开始弧度,结束弧度,方向)
ctx.beginPath();
ctx.arc(
300, 300,
200,
0, Math.PI * 3 / 2,
);
ctx.stroke();
画切线圆弧
- arcTo(x1,y1,x2,y2,半径)
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.arcTo(
400, 50,
400, 250,
100
);
ctx.stroke();
画二次贝尔曲线
- quadraCurveTo(cpx1,cpy1,x,y)
ctx.beginPath();
// 开始点
ctx.moveTo(400, 400);
ctx.quadraticCurveTo(
// 控制点
600, 0,
// 结束点
800, 400,
)
ctx.stroke();
画三次贝尔曲线
- bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
ctx.beginPath();
//开始点
ctx.moveTo(50, 50);
ctx.bezierCurveTo(
//控制点1
400, 50,
//控制点2
400, 250,
//结束点
600, 250
)
ctx.stroke();
画矩形
- rect(x,y,w,h)
ctx.beginPath();
ctx.rect(
100, 50,
400, 200
)
ctx.stroke();