关于利用canvas画带箭头的直线旋转

利用canvas在Vue项目中使用：

    <img
                        id="range_right"
                        src=""
                        style="
                          position: absolute;
                          left: 0px;
                          bottom: 0px;
                          width: 100%;
                          z-index: 2;
                        "
                      />

//图片上面箭头旋转直线
      GetArrow(eye_number) {
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d')
        var img = document.getElementById('arrow_right')
        var img2 = document.getElementById('range_left')
        canvas.width = 128
        canvas.height = 128
        var w = canvas.width
        var h = canvas.height
        ctx.clearRect(0, 0, w, h)
        angles = new Array(0, 30, 60, -90, -60, -30)
        index = eye_number - 1
        var urlData = this.DrawArrow(62, angles[index], true, 'green')
        var urlData = canvas.toDataURL('image/png')
        // img.src = urlData
        img.src = urlData
        img2.src = urlData
        return urlData
      },
      GetMutiArrow(eye_number) {
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d')
        canvas.width = 600
        canvas.height = 400
        var w = canvas.width
        var h = canvas.height
        ctx.clearRect(0, 0, w, h)
        angles = new Array(0, 30, 60, -90, -60, -30)
        for (index = 0; index < 6; index++) {
          this.color = 'blue'
          if (eye_number == index + 1) {
            this.color = 'red'
          }
          this.DrawArrow(156, angles[index], false, this.color, 1)
        }
        var urlData = canvas.toDataURL('image/png')

        return urlData
      },
      DrawArrow(value, angle, circle, color = 'blue', linewidth = 4) {
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d')
        var img = document.getElementById('range_right')
        var img2 = document.getElementById('arrow_left')
        var w = canvas.width
        var h = canvas.height
        ctx.save() //保存当前画布
        ctx.translate(w / 2, h / 2) //重新映射画布上的 (0,0) 位置。也就是画布的平移
        ctx.rotate((angle * Math.PI) / 180) //画布的旋转
        ctx.strokeStyle = color //颜色
        ctx.lineWidth = linewidth
        var centerX = 0
        var centerY = 0
        if (circle) {
          ctx.beginPath() //路径
          ctx.moveTo(centerX + value, centerX)
          ctx.arc(
            centerX,
            centerX,
            value,
            (0 * Math.PI) / 180, // 返回 1（0 度的余弦）
            (360 * Math.PI) / 180
          )
          ctx.stroke()
        }
        ctx.beginPath() //路径
        ctx.moveTo(centerX - value, centerY)
        ctx.lineTo(centerX + value, centerY)
        ctx.stroke()

        ctx.moveTo(centerX + value, centerY)
        ctx.lineTo(centerX + value - 30, centerY - 10)
        ctx.stroke()

        ctx.moveTo(centerX + value, centerY)
        ctx.lineTo(centerX + value - 30, centerY + 10)
        ctx.stroke()
        ctx.restore()
        var urlData = canvas.toDataURL('image/png')
        img.src = urlData
        img2.src = urlData
      },