vue 中使用canvas画简单的线条动画效果

vue 中使用canvas画简单的线条动画效果；
问题：1.没有写X轴或者Y轴不变的逻辑判断；2.不会画弧度，不知道弧线怎么去单个像素的画。

method中定义方法：

getCanvas(start,end){
        return new Promise(resolve=>{
        let movingDistance_x = end.x - start.x; //x轴需要移动的距离
        let movingDistance_y = end.y - start.y; //y轴需要移动的距离
        let ratio = movingDistance_y / movingDistance_x; // 斜率
        // 画线的方法
        let draw_lineTo = (start_draw,end_draw)=>{
          this.ctx.beginPath()
          this.ctx.lineCap="round";
          this.ctx.lineJoin="round";
          this.ctx.miterLimit=1;
          this.ctx.moveTo(start_draw.x,start_draw.y)
          this.ctx.lineTo(end_draw.x,end_draw.y)
          this.ctx.lineWidth = 4
          this.ctx.strokeStyle = 'rgb(32,83,131)'
          this.ctx.stroke()
          if(Math.abs(end_draw.x - end.x) == 0 ){
            resolve()
            return
          }
          start_position = end_draw
          end_position = getEnd_position(start_position)
          console.log(Math.abs(end_draw.x - end.x),start_position,end_position)
          setTimeout(() => {
            draw_lineTo(start_position,end_position)
          }, 10);
        }
        // 获取开始坐标
        let start_position = { x : start.x, y : start.y}
        // 获取结束坐标的方法
        let getEnd_position = (start_position)=>{
          let x = end.x > start.x ? (start_position.x + 1) : (start_position.x - 1)
          let y =
            end.x > start.x
              ? start_position.y + ratio
              : start_position.y - ratio;
          return { x : x , y : y }
        }
        // 获取结束坐标
        let end_position = getEnd_position(start_position)
        // 画线
        draw_lineTo(start_position,end_position)
        })
      }

mounted中调用

this.ctx = this.$refs.myCanvas.getContext('2d')
      this.$nextTick(()=>{
        (async () =>{
          await this.getCanvas({x:706,y:402},{x:660,y:375})
          await this.getCanvas({x:598,y:374},{x:534,y:410})
          await this.getCanvas({x:534,y:410},{x:468,y:374})
          // 分叉
          this.getCanvas({x:468,y:374},{x:554,y:321}) 
            .then(()=>{
              this.getCanvas({x:554,y:321},{x:518,y:296})
            })
          await this.getCanvas({x:468,y:374},{x:241,y:503})
          await this.getCanvas({x:241,y:503},{x:23,y:377})
          this.getCanvas({x:23,y:377},{x:62,y:352})
        })()
      })