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})
        })()
      })