本文實例為大家分享了vue canvas繪制時間軸的具體代碼，供大家參考，具體內容如下

最近在研究canvas繪制時間軸，直接上代碼，希望分享能給大家帶來幫助，效果如下：

代碼如下，可以拷貝到vue項目中直接預覽

<template> <div> <canvas 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 || 1return (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 // 時間 = 左側開始時間 + 偏移時間 + 格數 * msbeginX = pxOffset + i * (ms * pxMs)let canvasColorlet showTime = pageShowStartTime + beginX / pxMs * 1000if (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)) / 60hour = parseInt((minute / 60).toString())minute = minute % 60/* eslint-disable */hour >= 10 ? hour : hour = ’0’ + hourminute >= 10 ? minute : minute = ’0’ + minutesecond = second % 60second >= 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’ + minutesecond = second % 60second >= 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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。