vue+canvas绘制时间轴的方法

本文实例为大家分享了vue canvas绘制时间轴的具体代码，供大家参考，具体内容如下

最近在研究canvas绘制时间轴，直接上代码，希望分享能给大家带来帮助，效果如下：

代码如下，可以拷贝到vue项目中直接预览

<template>
  <div>
    <canvas id="time_line" width="1200" height="27"></canvas>
  </div>
</template>

<script>
export default {
  name: 'pathwaytrack',
  data() {
    return {
      screenwidth: document.body.clientwidth
    }
  },
  mounted() {
    let that = this
    that.carvetimescale(1200, 1, 10, 0, 10)
    let canvascolor = '#999999'
    let inittime = 12000
    setinterval(() => {
      inittime += 1000
      that.carvetimescale(1200, 1, 10, inittime, 10)
    }, 1000);
  },
  methods: {
    /**
     * 分割像素刻度
     * width: 宽度 ms：一个小刻度的毫秒数 pxms：10像素一个小刻度 pageshowstarttime：初始时间（毫秒） 一大段间隔时长(秒）
     */
    carvetimescale(width, ms, pxms, pageshowstarttime, intervaltime) {
      let canvasid = document.getelementbyid('time_line')
      let ctx = canvasid.getcontext('2d')
      ctx.clearrect(0, 0, 1200, 60)
      ctx.fillstyle = '#999999'
      // 为防止苹果屏幕2x显示不正常
      // 为防止苹果屏幕2x显示不正常
      var getpixelratio = function (context) {
        var backingstore = context.backingstorepixelratio ||
          context.webkitbackingstorepixelratio ||
          context.mozbackingstorepixelratio ||
          context.msbackingstorepixelratio ||
          context.obackingstorepixelratio ||
          context.backingstorepixelratio || 1
        return (window.devicepixelratio || 1) / backingstore
      }
      let ratio = getpixelratio(ctx)
      let msoffset = this.startoffsettime(pageshowstarttime, ms) // 开始的偏移时间 ms
      let pxoffset = msoffset / 1000 * pxms // 开始的偏移距离 px
      let leftdistance = 0 // 到左侧的距离
      let leftdistancetime = 0 // 到左侧的时间
      let beginx = 0
      let beginy = 0
      for (let i = 0; i < width / (ms * pxms); i++) {
        leftdistance = pxoffset + i * (ms * pxms) // 距离 = 开始的偏移距离 + 格数 * px/格
        leftdistancetime = pageshowstarttime + msoffset + i * ms // 时间 = 左侧开始时间 + 偏移时间 + 格数 * ms
        beginx = pxoffset + i * (ms * pxms)
        let canvascolor
        let showtime = pageshowstarttime + beginx / pxms * 1000
        if (showtime % (intervaltime * 1000) === 0) {
          beginy = 0
          ctx.font = '12px arial'
          ctx.filltext(this.changetime(showtime, 1), beginx + 10, 22)
          canvascolor = '#999999'
          ctx.fillstyle = '#b1b1b1'
          this.drawline(leftdistance, beginy, leftdistance, 20, canvascolor, 1)
        } else if (showtime % intervaltime == 0) {
          beginy = 0
          canvascolor = '#999999'
          this.drawline(leftdistance, beginy, leftdistance, 10, canvascolor, 1)
        }
      }
    },
    /**
     * 根据传入参数画线
     */
    drawline(beginx, beginy, endx, endy, color, width) {
      let canvasid = document.getelementbyid('time_line');
      let ctx = canvasid.getcontext('2d');
      ctx.beginpath();
      ctx.moveto(beginx, beginy);
      ctx.lineto(endx, endy);
      ctx.strokestyle = color;
      ctx.linewidth = width;
      ctx.stroke();
    },
    /**
     * 左侧开始时间的偏移，返回单位ms
     */
    startoffsettime(timestamp, step) {
      let remainder = timestamp % step
      return remainder ? step - remainder : 0
    },
    /**
     * 返回时间
     */
    changetime(time, num) {
      let hour = 0
      let minute = 0
      let second = 0
      second = time / 1000
      if (second >= 3600) {
        minute = (second - (second % 60)) / 60
        hour = parseint((minute / 60).tostring())
        minute = minute % 60
        /* eslint-disable */
        hour >= 10 ? hour : hour = '0' + hour
        minute >= 10 ? minute : minute = '0' + minute
        second = second % 60
        second >= 10 ? second : second = '0' + second
        /* eslint-enable */
        return hour + ':' + minute + ':' + second
      }
      if (second < 3600 && second >= 60) {
        hour = '00'
        minute = parseint((second / 60).tostring())
        /* eslint-disable */
        minute >= 10 ? minute : minute = '0' + minute
        second = second % 60
        second >= 10 ? second : second = '0' + second
        /* eslint-enable */
        return hour + ':' + minute + ':' + second
      }
      if (second < 60) {
        hour = '00'
        minute = '00'
        second = parseint(second)
        /* eslint-disable */
        second >= 10 ? second : second = '0' + second
        /* eslint-enable */
        return hour + ':' + minute + ':' + second
      }
    }
  }
}
</script>

<style lang="less" scoped>
  canvas {
    background: black;
  }
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。