最近有绘制虚线圆圈的需求,简单封装了一下,这里记录一下以便将来查阅:

    ctx.save()
    ctx.strokeStyle = CIRCLE_COLOR
    ctx.lineWidth = 2

    const step = 120   // 圆的总共段数 最好能被360整除
    const count = Math.floor(360 / step)
    let s = count / 180 * Math.PI * 2

    for (let b = 0, e = s / 2; e <= 360; b += s, e += s) {
      ctx.beginPath()
      ctx.arc(x, y, radius, b, e);  
      ctx.stroke();
    }

    ctx.restore();