如何使用 Canvas 实现时间线？

Question

时间线能否显示最长20小时，最短5秒，并且可扩展，或者有没有现成的第三方插件可用？类似于视频编辑软件中的时间线。

我在中国很难找到可用的时间线示例。

Answer 1

创建时间线很难编程，尤其是在不使用任何外部资源的情况下。我建议你找一个预制的或者找一个熟悉 JavaScript 的人。您也可以尝试以下方法。

#timeline {
    width: 100%;
    height: 100px;
    background-color: #f0f0f0;
    position: relative;
}

.event {
    position: absolute;
    height: 100%;
    background-color: #007bff;
    opacity: 0.7;
    border-radius: 5px;
}

然后你必须添加某种 JavaScript 来创建时间线，我建议使用 DIV 元素，因为画布对于简单使用来说太不切实际了。

<div id="timeline"></div>

此外，JavaScript 也是必要的。 来源：ChatGPT

document.addEventListener("DOMContentLoaded", function() {
    const timeline = document.getElementById('timeline');

    // Calculate the width of one hour in pixels
    const pixelsPerHour = timeline.offsetWidth / 20;

    // Calculate the minimum width for 5 seconds
    const minEventWidth = pixelsPerHour / (60 * 60) * 5;

    // Sample events data (time in seconds)
    const events = [
        { start: 0, duration: 3600 },  // Example event starting at 0 seconds and lasting 1 hour
        { start: 7200, duration: 7200 } // Another event starting at 2 hours and lasting 2 hours
    ];

    // Render events on the timeline
    events.forEach(event => {
        const eventElement = document.createElement('div');
        const eventWidth = Math.max(minEventWidth, (event.duration / 3600) * pixelsPerHour); // Ensure event width is at least the minimum
        const eventLeft = (event.start / 3600) * pixelsPerHour; // Calculate left position

        eventElement.classList.add('event');
        eventElement.style.width = eventWidth + 'px';
        eventElement.style.left = eventLeft + 'px';

        timeline.appendChild(eventElement);
    });
});