快应用Canvas画虚线圆

 

 一：

//绘制虚线圆圈

drawCanvas(x, y, radius, step) {
    const canvas = this.$element('canvas') //获取 canvas 组件
    const ctx = canvas.getContext('2d') //获取 canvas 绘图上下文
    step = step / 180 * Math.PI * 2;
    for (let b = 0, e = step / 2; e <= 360; b += step, e += step) {
      ctx.beginPath()
      ctx.arc(x, y, radius, b, e);

      ctx.stroke();
    }
  },

 //绘制背景及透明圆圈 

  drawCanvas1() {
    const canvas = this.$element('canvas') //获取 canvas 组件
    const ctx = canvas.getContext('2d') //获取 canvas 绘图上下文
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
    ctx.fillRect(0, 0, 360, 4000)
    ctx.arc(180, 225, 125, 0, Math.PI * 2)
    ctx.globalCompositeOperation = 'destination-out'
    ctx.fill()
    this.drawCanvas(180, 225, 125, 2)

  },

 二：绘制虚线圆圈

  // 虚线圆圈
  drawCanvas(x, y, radius, step) {
    const canvas = this.$element('canvas2') //获取 canvas 组件
    const ctx = canvas.getContext('2d') //获取 canvas 绘图上下文

    ctx.setLineDash([10, 4])
    ctx.strokeStyle = '#bababa'
   
    ctx.beginPath()
    ctx.arc(180, 225, 125, 0, Math.PI * 2)
    ctx.stroke()

  },

三：清除画布的方法

function clearCanvas()
{
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.clearRect(0,0,c.width,c.height);
}

 

 参考博客：canvas绘制虚线，虚线方框，虚线圆----https://www.jianshu.com/p/ae24e1571c73

html5清空画布方法------https://blog.csdn.net/u010484625/article/details/46046217