vue+canvasでタイムラインを描く方法

<テンプレート>
  <div>
    <canvas id="time_line" width="1200" height="27"></canvas>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'pathwaytrack',
  データ（） {
    戻る {
      画面幅: document.body.clientWidth
    }
  },
  マウント() {
    それを = これとする
    that.carveTimeScale(1200, 1, 10, 0, 10)
    キャンバスカラーを '#999999' にします
    initTime = 12000 とします
    間隔を設定する(() => {
      初期化時間 += 1000
      that.carveTimeScale(1200, 1, 10, initTime, 10)
    }, 1000);
  },
  メソッド: {
    /**
     * 分割ピクセルスケール* width: 幅 (ミリ秒): 小さいスケールの場合はミリ秒数 pxMs: 小さいスケールの場合は 10 ピクセル pageShowStartTime: 初期時間 (ミリ秒) 大きい間隔の継続時間 (秒)
     */
    carveTimeScale(幅、ミリ秒、ピクセル数、ページ表示開始時間、間隔時間) {
      canvasId = document.getElementById('time_line') とします。
      ctx = canvasId.getContext('2d') とします。
      ctx.clearRect(0, 0, 1200, 60)
      ctx.fillStyle = '#999999'
      // Apple 2X 画面で異常な表示を防ぐため // Apple 2X 画面で異常な表示を防ぐため var getPixelRatio = function (context) {
        var backingStore = context.backingStorePixelRatio ||
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          コンテキスト.msBackingStorePixelRatio ||
          コンテキスト.oBackingStorePixelRatio ||
          コンテキスト.backingStoreピクセル比 || 1
        戻り値 (window.devicePixelRatio || 1) / backingStore
      }
      比率 = getPixelRatio(ctx) とします。
      let msOffset = this.startOffsetTime(pageShowStartTime, ms) // 開始オフセット時間 ms
      let pxOffset = msOffset / 1000 * pxMs // 開始オフセット距離 px
      let leftDistance = 0 // 左への距離 let leftDistanceTime = 0 // 左への時間 let beginX = 0
      beginY = 0 とする
      (i = 0 とします; i < 幅 / (ms * pxMs); i++) {
        leftDistance = pxOffset + i * (ms * pxMs) // 距離 = 開始オフセット距離 + グリッド数 * px/グリッド leftDistanceTime = pageShowStartTime + msOffset + i * ms // 時間 = 左開始時間 + オフセット時間 + グリッド数 * ms
        beginX = pxOffset + i * (ms * pxMs)
        キャンバスカラー
        showTime = pageShowStartTime + beginX / pxMs * 1000 とします。
        表示時間% (間隔時間 * 1000) === 0の場合
          開始Y = 0
          ctx.font = '12px Arial'
          ctx.fillText(this.changeTime(showTime, 1), beginX + 10, 22)
          キャンバスカラー = '#999999'
          ctx.fillStyle = '#B1B1B1'
          this.drawLine(左距離、開始Y、左距離、20、キャンバスカラー、1)
        } そうでない場合 (showTime % intervalTime == 0) {
          開始Y = 0
          キャンバスカラー = '#999999'
          this.drawLine(左距離、開始Y、左距離、10、キャンバスカラー、1)
        }
      }
    },
    /**
     * 渡されたパラメータに従って線を描画します */
    描画線(開始X、開始Y、終了X、終了Y、色、幅) {
      canvasId を document.getElementById('time_line') に設定します。
      ctx = canvasId.getContext('2d') とします。
      ctx.beginPath();
      ctx.moveTo(開始X、開始Y);
      ctx.lineTo(終了X、終了Y);
      ctx.strokeStyle = 色;
      ctx.lineWidth = 幅;
      ctx.stroke();
    },
    /**
     * 左開始時間のオフセット（ミリ秒単位で返されます）
     */
    startOffsetTime(タイムスタンプ, ステップ) {
      残り = タイムスタンプ % ステップ
      残りを返す?ステップ - 残り: 0
    },
    /**
     * 帰りの時間 */
    changeTime(時間, 数値) {
      時間 = 0 とする
      分を 0 にする
      秒を 0 にする
      秒 = 時間 / 1000
      （秒 >= 3600）の場合{
        分 = (秒 - (秒 % 60)) / 60
        時間 = parseInt((分 / 60).toString())
        分 = 分 % 60
        /* eslint を無効にする */
        時間 >= 10 ? 時間 : 時間 = '0' + 時間
        分 >= 10 ? 分 : 分 = '0' + 分
        秒 = 秒 % 60
        秒 >= 10 ? 秒 : 秒 = '0' + 秒
        /* eslint を有効にする */
        時間 + ':' + 分 + ':' + 秒を返す
      }
      （秒<3600 &&秒>=60）の場合{
        時間 = '00'
        分 = parseInt((秒 / 60).toString())
        /* eslint を無効にする */
        分 >= 10 ? 分 : 分 = '0' + 分
        秒 = 秒 % 60
        秒 >= 10 ? 秒 : 秒 = '0' + 秒
        /* eslint を有効にする */
        時間 + ':' + 分 + ':' + 秒を返す
      }
      （秒数<60）の場合{
        時間 = '00'
        分 = '00'
        秒 = parseInt(秒)
        /* eslint を無効にする */
        秒 >= 10 ? 秒 : 秒 = '0' + 秒
        /* eslint を有効にする */
        時間 + ':' + 分 + ':' + 秒を返す
      }
    }
  }
}
</スクリプト>

<style lang="less" スコープ>
  キャンバス {
    背景：黒;
  }
</スタイル>