canvas刻画时间轴

最新推荐文章于 2024-04-01 09:49:25 发布

置顶云峰啊

最新推荐文章于 2024-04-01 09:49:25 发布

阅读量2.5k

点赞数 2

本文链接：https://blog.csdn.net/weixin_38763607/article/details/106334574

版权

给同事写的demo，顺带分享下直接复制代码运行就行了。注释都写的很清楚啦

建议：如写时间轴之类的操作一切单位换算成毫秒

拖动更新时间轴其实就是更新初始时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            background: black;
        }
    </style>
</head>
<body>
<canvas id="time_line" width="1200" height="100"></canvas>
</body>
</html>
<script>
    /**
     * 根据时间对应的像素画刻度
     */
    function triangleTime(width, ms, pxMs, pageShowStartTime, intervalTime) {
        let canvasId = document.getElementById('time_line')
        let ctx = canvasId.getContext('2d')
        ctx.clearRect(0, 0, 1200, 400)
        ctx.fillStyle = '#999999'
        // 为防止苹果屏幕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 = startOffsetTime(pageShowStartTime,ms * 1000 ) // 开始的偏移时间 ms
        let initCnavasImgLeft = pageShowStartTime % (intervalTime * 1000)
        let pxOffset = msOffset / 1000 * pxMs // 开始的偏移距离 px
        let graduationLeft = 0
        let graduationTime = 0
        let beginX = 0
        let beginY = 0
        for (let i = 0; i < width / (ms * pxMs); i++) {
            // console.log(width / (ms * pxMs))
             graduationLeft = pxOffset + i * (ms * pxMs) // 距离=开始的偏移距离+格数*px/格
            // graduationTime = pageShowStartTime + msOffset + i * ms  // 时间=左侧开始时间+偏移时间+格数*ms/格
            // graduationTime = pageShowStartTime + graduationLeft * 1000 / pxMs  // 时间=左侧开始时间+偏移时间+格数*ms/格
            beginX = pxOffset + i * (ms * pxMs)
            let canvasColor
            let showTime = pageShowStartTime + (graduationLeft * 1000) / pxMs
            if (showTime % (intervalTime * 1000) === 0) {
                console.log(showTime);
                beginY = 0
                ctx.font = '12px Arial'
                ctx.fillText(changeTime(showTime, 1), beginX + 10, 25)
                canvasColor = '#999999'
                ctx.fillStyle = '#B1B1B1'
                drawLine(graduationLeft, beginY, graduationLeft, 45, canvasColor, 1 * ratio)
            } else if (showTime % intervalTime === 0) {
                beginY = 35
                canvasColor = '#999999'
                drawLine(graduationLeft, beginY, graduationLeft, 45, canvasColor, 1 * ratio)
            }
        }
    }

    /**
     * 左侧开始时间的偏移，返回单位ms
     */
    function startOffsetTime(timestamp, step) {
        let remainder = timestamp % step
        return remainder ? step - remainder : 0
    }

    /**
     * 根据传入参数画线。。
     */
    function 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()
    }

    /**
     * 返回时间
     */
    function changeTime(time, num) { // 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
        }
    }
    // canvas宽度  一个小刻度的秒数 10像素一个小刻度   初始时间（毫秒）  一大段间隔时长(秒）

    triangleTime(1200, 1, 10, 0, 10)

    let initTime = 0
    setInterval(() => {
        initTime += 700
        triangleTime(1200, 1, 10, initTime, 10)
    }, 1000)

</script>

云峰啊

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
canvas刻画时间轴

给同事写的demo，顺带分享下直接复制代码运行就行了。注释都写的很清楚啦建议：如写时间轴之类的操作一切单位换算成毫秒拖动更新时间轴其实就是更新初始时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { ..
复制链接

扫一扫