vue+canvas绘制时间轴的方法
作者：aminsky0
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。