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 = thisthat.carveTimeScale(1200, 1, 10, 0, 10)let canvasColor = '#999999'let initTime = 12000setInterval(() => {initTime += 1000that.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) // 开始的偏移时间 mslet pxOffset = msOffset / 1000 * pxMs // 开始的偏移距离 pxlet leftDistance = 0 // 到左侧的距离let leftDistanceTime = 0 // 到左侧的时间let beginX = 0let beginY = 0for (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 = 0ctx.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 = 0canvasColor = '#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 % stepreturn remainder ? step - remainder : 0},/*** 返回时间*/changeTime(time, num) {let hour = 0let minute = 0let second = 0second = time / 1000if (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>

vue+canvas绘制时间轴相关推荐

vue+canvas绘制时间轴组件
说明: 此组件使用vue2语法以及canvas实现. 效果图: 线上地址: time-select-line 安装: npm i time-select-line --save 导入: import ...
GraphPad Prism绘制时间轴图
今天教大家如何绘制"时间轴图",并展示网格线的使用方法和坐标后缀的编辑. 通常,在GraphPad中的Column中,新建一组数据后,会自动生成散点图,然后对其进行相应的编辑,即可 ...
vue + canvas绘制扇形圆盘
vue + canvas绘制扇形圆盘 html: <canvas style="position: fixed;z-index:-1" width="545&quo ...
【定制项目】【M14 监测预警平台】百度地图区域绘制(时间轴）/柱状图/仪表图 - 关键技术 python flask + echarts
一.项目需求项目名称:[某监测预警平台]. 项目需求:气候数据:雨量,温湿度,PM,雷达回波,雷电预报等展示到可视化大屏. 项目工期:10个工作日. 二.项目架构运行环境支持Windows,Lin ...
Vue.js 实现时间轴功能
GitHub 时间轴组件封装 Main.js <template><div class="timeline-main"><div class=&quo ...
canvas刻画时间轴
给同事写的demo,顺带分享下直接复制代码运行就行了.注释都写的很清楚啦建议:如写时间轴之类的操作一切单位换算成毫秒拖动更新时间轴其实就是更新初始时间 <!DOCTYPE html& ...
vue 发展历程时间轴动画_PPT时间轴如何做出创意感？海量素材免费分享，网友：收藏...
时间轴页面,是工作型PPT中常见的页面之一.个人述职或者公司介绍PPT中,使用时间轴,能够让观众更加清晰地了解公司的发展历程. 但是,很多人在制作时间轴页面时,往往是这样的效果: 只有几行字和一根线, ...
vue实现物流时间轴效果
实现效果 html <ul class="time-axis" :class="{ 'is-done': item.state === 1 }" v-fo ...
Vue如何实现时间轴
效果: 该时间轴每页最多默认展示三条数据,根据后台数据而定,超过三条前端分页处理: 注: 该时间轴展示的是每条工程数据的鸟瞰图,照片可多张,利用el-carousel.el-image-viewer插 ...

vue+canvas绘制时间轴

vue+canvas绘制时间轴

vue+canvas绘制时间轴相关推荐

最新文章

热门文章