【Canvas】绘制时间轴+动态当前时间线

最新推荐文章于 2025-02-25 23:04:00 发布

小鱼小鱼干

最新推荐文章于 2025-02-25 23:04:00 发布

阅读量2.4k

点赞数

分类专栏：前端踩坑路漫漫 # Canvas 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43361722/article/details/125974634

版权

前端踩坑路漫漫同时被 2 个专栏收录

99 篇文章

订阅专栏

Canvas

4 篇文章

订阅专栏

这篇博客展示了一个使用HTML5 Canvas绘制动态时间轴的实现，时间轴从8:30到20:30，每分钟一格，每十分钟一小格，每六个小格一大格。代码详细解释了如何计算和绘制当前时间在时间轴上的位置，以及绘制刻度线和时间背景。该示例可用于创建实时更新的时间监控应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制时间轴</title>
<style>
	body {
		padding: 0;
		margin: 0;
	}

	canvas {
		display: block;
		margin: 200px auto;
	}
</style>
</head>
<body>
<canvas id="solar" width="800" height="400"></canvas>
<script>
var width = document.querySelector("#solar").width
var height = document.querySelector("#solar").height

var HEIGHT = this.height
var WIDTH = this.width
var timeWidth = WIDTH - 100
var cell = timeWidth/(12*60) // 一分钟的宽度，每十分钟一小格 每六个小格一个大格
var timeW = WIDTH * 0.042 // 时间背景宽度
var timeH = timeW * 0.75 // 时间背景高度
var timeGap = WIDTH * 0.063 // 时间间隔
var interval = {}
var context = {}

init()

function init(){
    let canvas = document.querySelector("#solar")
    let ctx = canvas.getContext("2d")
    this.width = canvas.width
    this.height = canvas.height
    // !!!重要：ctx赋值全局变量，以免传输中改变
    context = ctx

    this.clear()
    // 绘制时间轴时间线
    this.countLine()
    interval = setInterval(() => {
        this.countLine()
    }, 5000)
}

// 清画布
function clear(){
    context.clearRect(0, 0, this.width, this.height)
}

// 绘制动态时间线
function countLine() {
    let beginY = 100
    let beginX = 50
    let beginTime = 8
    
    // 计算出当前时间与8:30之间的差值
    let time = new Date();
    let t1 = new Date(time.toLocaleDateString() + " 8:30:00")
    let t2 = new Date(time.toLocaleDateString() + " 20:30:00")
    let diffMinute = (time - t1)/1000/60
    let len = diffMinute * cell + beginX
    if(time > t2){ // 超过20:30 时间从20：30开始显示
        diffMinute = (time - t2)/1000/60
        len = diffMinute * cell + beginX
        beginTime = 20
    } 
    context.beginPath()
    context.moveTo(len, beginY)
    context.lineTo(len, HEIGHT)
    context.strokeStyle = "#9099A5"
    context.stroke()
    // 绘制刻度
    this.drawScale(beginTime)
}

function drawScale(beginTime) {
    this.clear()
    // 坐标轴基准线
    let beginY = 100
    let beginX = 50
    // 绘制坐标横轴
    context.strokeStyle = "#9099A5"
    context.moveTo(beginX, beginY)
    context.lineTo(beginX + timeWidth, beginY)
    context.stroke()
    // 绘制短竖线
    for(let i = 0; i <= 72; i++){
        if(i%6 === 0){ // 绘制大格
            context.moveTo(beginX, beginY - 30)
            context.lineTo(beginX, beginY + 30)
            context.stroke()
            if(beginTime >= 24){
                beginTime = beginTime - 24
            }
            context.fillText(beginTime + ':30', beginX-10, beginY - 50)
            beginTime +=1
        }else{ // 绘制小格
            context.moveTo(beginX, beginY - 15)
            context.lineTo(beginX,beginY + 15)
            context.stroke()
        }
        beginX += cell * 10
    }
}

</script>
</body>
</html>