03-02曲线图形-弧形

arc()方法画弧线

TIP

在使用arc方法画完弧线之后，不使用closePath关闭路径，即可获得不封闭的弧线

描边弧线的步骤

1. 开始路径
2. arc()画圆
3. 描边操作

弧线

// 开始路径
cxt.beginPath() 
cxt.arc(80, 80, 50, 0, -90 * Math.PI / 180, true) 
// 不加closePath就可以获得不封闭的弧线
cxt.strokeStyle = 'hotPink'
cxt.stroke()

效果图：

带延长线的弧线

// 直线
cxt.moveTo(20, 20)
cxt.lineTo(70, 20)
cxt.strokeStyle = 'hotPink'
cxt.stroke()
// 画弧线
cxt.beginPath() 
cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true) 
cxt.moveTo(120, 70)
cxt.lineTo(120, 120)
cxt.strokeStyle = 'hotPink'
cxt.stroke()

效果图：

arcTo()方法画弧线

画弧线的三个坐标点

• 开始点：开始点所在边与圆的切点，一般由 moveTo() 或 lineTo() 提供

TIP

开始点并不一定是切点，如果不是切点，那么会在开始点和控制点绘制一条切线，与圆的切点则是真正的开始点

• 控制点：两个切线的交点，由 arcTo() 提供
• 结束点：结束点所在边与圆的切点，由 arcTo() 提供

语法

cxt.arcTo(cx, cy, x2, y2, radius)

参数说明

• cx, cy就是控制点坐标
• x2, y2就是结束点坐标

注意

1. 利用开始点、控制点和结束点形成的夹角，绘制一段与夹角的两边相切并且半径是 radius 的圆弧
2. 使用 arcTo 不需要和 beginPath 配合使用

绘制弧线

开始是切点的弧线

// 开始是切点
cxt2.moveTo(20, 20)
cxt2.lineTo(70, 20) 
cxt2.arcTo(120, 20, 120, 70, 50) 
cxt2.lineTo(120, 120)
cxt2.strokeStyle = 'hotPink'
cxt2.stroke()

开始不是切点的弧线，自动绘制了圆的切点为起始点

// 开始不是切点
cxt.moveTo(20, 20) 
cxt.arcTo(120, 20, 120, 70, 50) 
cxt.lineTo(120, 120)
cxt.strokeStyle = 'hotPink'
cxt.stroke()

效果图：

起始点是切点

起始点不是切点