canvas(二) 路径与子路径

路径

• 开始建立路径：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();