| 本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
Vue.js实现日历功能
vue+js实现视频淡入淡出效果 |
