简介这是一份基于 canvas 实现的时间轴插件源码面向需要在前端项目中实现视频回放时间轴、录像片段管理等功能的开发者尤其适合具备一定 JavaScript 与 jQuery 基础的中级前端人员。插件支持拖动时间轴、点击定位返回时间点、动态增加录像块以及放大缩小等交互操作可直接嵌入视频回放类页面使用。压缩包共 6 个文件包含 3 个 js 脚本、2 个 html 示例页面和 1 个 md 说明文档整体约 90KB体积轻量便于快速集成与二次开发。其中 js 文件承载时间轴核心逻辑与依赖库html 页面提供可直接运行的演示示例md 文档则说明基本用法与结构。目前已有 4077 人学习下载说明该方案在实际项目中具备一定参考价值。读者可借此理解 canvas 绘制时间轴、坐标换算与交互事件处理的完整思路并对照示例快速改造为自己的视频回放时间轴模块。1. 用 Canvas 手写时间轴插件拖动、点击回放、录像块与缩放到底怎么落地监控回放、视频剪辑、赛事打点这类界面里时间轴几乎是绕不开的组件。用现成 UI 库的时间轴控件初期接入快但一旦要做「拖动定位到秒」「点击空白处跳回某个时间点」「动态增加录像块」「滚轮缩放刻度」这几件事就会撞上样式改不动、事件被吞、缩放后坐标对不上的墙。我后来干脆用 Canvas 从零写了一个核心逻辑不到 400 行可控性反而高得多。这篇讲的就是这个方向不依赖任何时间轴库用 Canvas 自己画刻度、录像块和游标把拖动、点击返回时间点、增加录像块、放大缩小四件事一次做透。适合正在做视频回放、监控检索、剪辑打点界面的前端也适合想把 Canvas 坐标换算练扎实的人。下面按「先立住模型再动手复现最后讲坑」的顺序推。2. 先把时间轴的数据模型立住像素、时间、缩放三者的换算关系时间轴看着是画图本质是一套坐标换算。画布上每一个像素对应多少毫秒这个比例一旦定下来拖动、点击、缩放全都围绕它转。很多人写崩不是 Canvas API 不熟是没把「时间 → 像素」和「像素 → 时间」这两个函数抽出来导致每处逻辑各算各的缩放一改就全乱。2.1 三个核心量总时长、可视时长、缩放比我一般只维护三个量totalDuration整条时间轴代表的总毫秒数、viewDuration当前画布能看到的毫秒数、canvasWidth画布 CSS 宽度。缩放的本质就是改viewDuration放大 可视时长变小缩小 可视时长变大。像素与时间的换算比就是// 每毫秒占多少像素缩放后这个值会变 const pxPerMs canvasWidth / viewDuration; // 时间转像素相对当前视口起点 const timeToPx (ms) (ms - viewStart) * pxPerMs; // 像素转时间 const pxToTime (px) viewStart px / pxPerMs;viewStart是当前视口左边缘对应的时间点拖动改的就是它。把这两个函数定死后面所有交互都只调用它们不再手写乘法。2.2 录像块用区间数组描述不要用对象嵌套录像块有录像的时间段我建议用扁平数组每项就{ start, end }两个毫秒值。渲染时遍历数组把每段转成矩形画上去。这样增删改都只是数组操作和渲染解耦。如果录像块还带类型普通、报警、事件再加一个type字段渲染时按类型取色即可。// 录像块数据单位毫秒 const segments [ { start: 0, end: 60000, type: normal }, { start: 90000, end: 150000, type: event }, ];提示时间一律用毫秒整数存储别用 Date 对象在渲染层传来传去浮点和时区会给你埋雷。2.3 为什么不用 DOM 画刻度刻度可能有几百上千条用 DOM 生成 div 再定位缩放时频繁重排滚动会掉帧。Canvas 一次clearRect加批量fillRect、fillText性能稳定得多。代价是命中检测要自己算但这正好被上面的换算函数解决了——点击时把鼠标 x 转成时间再判断落在哪个录像块区间里就行。3. 用 Canvas 画刻度、录像块和游标的最小可运行版本这一章给一个能直接跑起来的最小实现包含初始化、渲染、拖动、点击、缩放五块。你可以整段复制到一个 HTML 文件里改改尺寸就能看到效果。3.1 初始化画布与高清屏适配高清屏上 Canvas 会糊必须按devicePixelRatio放大物理像素再用 CSS 尺寸约束显示大小。function setupCanvas(canvas, cssWidth, cssHeight) { const dpr window.devicePixelRatio || 1; // 物理像素放大避免高清屏模糊 canvas.width cssWidth * dpr; canvas.height cssHeight * dpr; canvas.style.width cssWidth px; canvas.style.height cssHeight px; const ctx canvas.getContext(2d); ctx.scale(dpr, dpr); // 之后所有绘制按 CSS 像素坐标走 return ctx; }ctx.scale(dpr, dpr)之后你写代码时用的就是逻辑像素不用再手动乘 dpr。这一步漏了后面所有坐标换算都要额外乘系数很容易错。3.2 渲染函数刻度、录像块、游标分层画渲染顺序很重要先底色再录像块再刻度最后游标。游标压在最上层才不会被盖住。function render(ctx, state) { const { canvasWidth, canvasHeight, viewStart, viewDuration, segments, cursorTime } state; const pxPerMs canvasWidth / viewDuration; ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 1. 录像块 segments.forEach(seg { const x1 (seg.start - viewStart) * pxPerMs; const x2 (seg.end - viewStart) * pxPerMs; if (x2 0 || x1 canvasWidth) return; // 视口外跳过 ctx.fillStyle seg.type event ? #e8804a : #3a7bd5; ctx.fillRect(x1, 20, x2 - x1, 40); }); // 2. 刻度按可视时长动态决定步长 const step pickStep(viewDuration); const firstTick Math.ceil(viewStart / step) * step; ctx.fillStyle #888; ctx.font 11px sans-serif; for (let t firstTick; t viewStart viewDuration; t step) { const x (t - viewStart) * pxPerMs; ctx.fillRect(x, 60, 1, 8); ctx.fillText(formatTime(t), x 3, 80); } // 3. 游标 const cx (cursorTime - viewStart) * pxPerMs; ctx.fillStyle #ff3b30; ctx.fillRect(cx - 1, 0, 2, canvasHeight); }pickStep根据当前可视时长选一个「好看」的刻度间隔比如可视 1 分钟用 5 秒一格可视 1 小时用 5 分钟一格避免刻度挤成一团或稀稀拉拉。function pickStep(viewDuration) { const targets [1000, 5000, 10000, 30000, 60000, 300000, 600000, 1800000, 3600000]; // 目标屏幕上大约每 80px 一个刻度 const ideal viewDuration / 10; return targets.find(t t ideal) || targets[targets.length - 1]; }3.3 拖动记录起点用位移反推 viewStart拖动的关键是「按下时记住鼠标 x 和当时的 viewStart」移动时用像素差换算成时间差。let dragging false, dragStartX 0, dragStartView 0; canvas.addEventListener(mousedown, (e) { dragging true; dragStartX e.offsetX; dragStartView state.viewStart; }); window.addEventListener(mousemove, (e) { if (!dragging) return; const dx e.offsetX - dragStartX; const pxPerMs state.canvasWidth / state.viewDuration; // 向左拖视口起点变大内容右移 state.viewStart dragStartView - dx / pxPerMs; clampViewStart(state); // 防止拖出边界 render(ctx, state); }); window.addEventListener(mouseup, () { dragging false; });注意mousemove和mouseup绑在window上不是 canvas 上。否则鼠标拖出画布就丢事件游标卡住不动这是最常见的翻车点。3.4 点击返回时间点区分点击与拖动点击和拖动共用 mousedown必须用位移阈值区分否则用户想点一下手抖两像素就变成拖动。let downX 0, moved false; canvas.addEventListener(mousedown, (e) { downX e.offsetX; moved false; }); canvas.addEventListener(mousemove, (e) { if (Math.abs(e.offsetX - downX) 3) moved true; }); canvas.addEventListener(click, (e) { if (moved) return; // 拖动过就不算点击 const pxPerMs state.canvasWidth / state.viewDuration; const t state.viewStart e.offsetX / pxPerMs; state.cursorTime clamp(t, 0, state.totalDuration); onSeek(state.cursorTime); // 回调给播放器 render(ctx, state); });onSeek是暴露给外部的回调插件本身不碰播放器只负责把时间点抛出去。这样插件和业务解耦回放、剪辑都能复用。3.5 缩放以鼠标位置为锚点别以左边缘缩放最容易翻车的地方是锚点。以左边缘缩放用户想放大看某段结果那段跑出屏幕了。正确做法是以鼠标所在时间点为锚缩放前后这个时间点在屏幕上的 x 不变。canvas.addEventListener(wheel, (e) { e.preventDefault(); const pxPerMs state.canvasWidth / state.viewDuration; const anchorTime state.viewStart e.offsetX / pxPerMs; // 锚点时间 const factor e.deltaY 0 ? 1.2 : 1 / 1.2; // 下滚缩小上滚放大 let newView state.viewDuration * factor; newView clamp(newView, 5000, state.totalDuration); // 限制缩放范围 // 反推新的 viewStart保证 anchorTime 的屏幕位置不变 state.viewStart anchorTime - (e.offsetX / state.canvasWidth) * newView; state.viewDuration newView; clampViewStart(state); render(ctx, state); });clampViewStart保证视口不越界viewStart最小 0最大totalDuration - viewDuration。缩放范围我一般限制在 5 秒到总时长之间太小没意义太大等于没放大。4. 增加录像块与命中检测数组操作和区间判断怎么写才不出错录像块是动态增删的用户可能拖选一段新增也可能点某个块删除。这一章讲增删逻辑和命中检测。4.1 新增录像块先合并重叠区间用户拖选一段新增时很可能和已有块重叠。直接 push 会出现视觉上叠在一起、点击命中混乱的问题。我一般先做区间合并。function addSegment(segments, start, end) { const merged []; const all [...segments, { start, end, type: normal }] .sort((a, b) a.start - b.start); for (const seg of all) { const last merged[merged.length - 1]; // 有重叠或相邻就合并 if (last seg.start last.end) { last.end Math.max(last.end, seg.end); } else { merged.push({ ...seg }); } } return merged; }合并后数组始终有序且不重叠渲染和命中检测都简单。如果业务要求保留类型区分合并时按优先级取 type别直接覆盖。4.2 命中检测二分查找比遍历快录像块多了以后每次点击遍历整个数组不划算。因为数组有序用二分找第一个end t的块即可。function hitTest(segments, t) { let lo 0, hi segments.length - 1; while (lo hi) { const mid (lo hi) 1; const seg segments[mid]; if (t seg.start) hi mid - 1; else if (t seg.end) lo mid 1; else return seg; // 命中 } return null; }点击时先pxToTime得到时间再hitTest命中就触发选中回调没命中就当作 seek。这样「点块」和「点空白」两种行为自然分开。4.3 删除与更新保持不可变数据增删改我倾向返回新数组不原地改。这样外部做撤销、对比、React 状态更新都省事。删除就是segments.filter(s s ! target)更新就是 map 替换。原地 splice 在复杂交互里很容易出现「渲染了但数据没变」的玄学问题。5. 避坑与排查时间轴插件最容易翻车的 5 个地方这一章是我踩过的坑按「现象 → 原因 → 解决」写你遇到时可以直接对号入座。5.1 拖动时游标抖动、跟手性差现象拖动时游标一顿一顿或者松手后位置和鼠标对不上。原因通常是每次 mousemove 都触发重排或者用了e.clientX而画布有偏移。解决用e.offsetX拿相对画布坐标渲染只走 Canvas 不碰 DOM必要时用requestAnimationFrame节流把多次 mousemove 合并成一帧一次渲染。5.2 缩放后点击位置偏移现象放大后点击游标落点比鼠标位置偏左或偏右。原因基本是缩放时没同步更新viewStart或者锚点算错。解决严格用 3.5 的锚点公式缩放前后用同一个anchorTime反推viewStart并确认pxPerMs用的是新的viewDuration。5.3 高清屏上刻度和文字发虚现象Mac 或高分屏上线条模糊、文字发虚。原因是没做 dpr 适配Canvas 物理像素和 CSS 像素 1:1。解决按 3.1 放大canvas.width并ctx.scale(dpr, dpr)。注意每次 resize 都要重新设置否则窗口变化后又糊。5.4 录像块重叠导致点击命中错乱现象点某个块却选中了另一个或者删不掉。原因是新增时没合并重叠区间数组里存在交叉区间二分查找失效。解决所有新增走addSegment合并保证数组有序不重叠如果业务必须保留重叠命中检测就不能用二分得遍历取最上层。5.5 滚轮缩放把页面也滚了现象在时间轴上滚轮时间轴放大的同时整个页面也上下滚。原因是没阻止默认行为。解决wheel监听里e.preventDefault()并且监听要绑在 canvas 上、用{ passive: false }否则浏览器会忽略 preventDefault。canvas.addEventListener(wheel, onWheel, { passive: false });6. 进阶技巧用离屏 Canvas 缓存刻度把千级刻度渲染压到 1ms时间轴刻度多了以后每帧重画所有刻度是浪费——刻度只在viewStart或viewDuration变化时才需要重画游标移动时刻度根本没变。我的做法是把刻度画到离屏 Canvas 缓存起来游标单独一层移动游标时只重画游标层。// 刻度层缓存 const tickLayer document.createElement(canvas); const tickCtx tickLayer.getContext(2d); function renderTicks(state) { tickLayer.width state.canvasWidth * dpr; tickLayer.height state.canvasHeight * dpr; tickCtx.setTransform(dpr, 0, 0, dpr, 0, 0); tickCtx.clearRect(0, 0, state.canvasWidth, state.canvasHeight); // ...在这里画刻度和录像块 } // 主渲染先贴刻度层再画游标 function renderFast(ctx, state) { ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight); ctx.drawImage(tickLayer, 0, 0, state.canvasWidth, state.canvasHeight); const cx (state.cursorTime - state.viewStart) * (state.canvasWidth / state.viewDuration); ctx.fillStyle #ff3b30; ctx.fillRect(cx - 1, 0, 2, state.canvasHeight); }只有viewStart、viewDuration、segments变化时才调renderTicks游标移动只调renderFast。实测千级刻度下游标拖动从每帧 8ms 降到 1ms 以内跟手性肉眼可见地变好。验证方法也简单在renderFast前后打performance.now()连续拖动 100 帧取平均。如果超过 4ms就该上缓存了。另一个技巧是刻度文字用ctx.measureText预判宽度太密时自动跳级别让文字叠在一起。我自己的习惯是任何 Canvas 组件先把「哪些东西每帧变、哪些偶尔变」列清楚变的单独一层不变的缓存。这个习惯帮我省过好几次性能优化的返工。时间轴这种交互密集的组件缓存刻度层几乎是必做项早做早省心。希望帮到你。本文还有配套的精品资源点击获取
