简介这是一份基于 Canvas 实现的时间轴插件源码包面向需要在网页中嵌入视频回放时间轴的开发者尤其适合具备 HTML、jQuery 基础并希望快速实现可交互时间轴的前端项目。插件围绕视频回放场景提供拖动浏览、点击定位并返回时间点、增加录像块、时间轴放大缩小等操作可用于监控回放、课程录像、媒体剪辑预览等界面。压缩包共 6 个文件以 3 个 JavaScript 脚本和 2 个 HTML 页面为主另附 1 个 Markdown 说明文档整体约 90KB便于直接打开示例页面理解调用方式与交互逻辑。已有 4080 人学习下载说明其在同类需求中具有一定参考价值。读者可从中获取可运行的 Canvas 绘制与事件处理示例、时间轴缩放和录像块增删的实现思路以及结合 jQuery 的页面集成方式适合作为项目原型或二次开发的基础素材。1. 上手就能改的 Canvas 时间轴插件拖动、缩放、录像块一次说清监控回放、录播剪辑、事件溯源这类界面里时间轴是最容易被低估的一块。用 div 堆一堆刻度也能跑但一到几千个时间片、几十个录像块叠加、还要拖动手感跟手DOM 方案很快就会翻车。这个基于 canvas html jquery 的时间轴插件把刻度绘制、录像块渲染、拖动定位、滚轮缩放、点击返回时间点这几件事收在一个可复用的组件里源码结构清晰接入现有页面成本低。适合正在做回放面板的前端、需要给后台管理加一条录像轨道、或者想找一个 canvas 交互练手项目的人。下面按「它怎么组织、怎么接、怎么改参数、哪里必踩坑」的顺序拆。2. 插件结构与绘制模型canvas 分层与时间到像素的映射2.1 坐标系时间轴插件的核心是一个线性映射这类插件的全部逻辑其实压在一条公式上像素位置和时间值之间的线性换算。设时间轴可视窗口起点为startTime跨度为duration毫秒画布可用宽度为width那么任意时刻t的 x 坐标是(t - startTime) / duration * width反过来给定鼠标 x 得到startTime x / width * duration。所有拖动、缩放、点击返回时间点都是对这两个方向换算的反复调用。理解这一点之后参数调整就有了落点拖动改变的是startTime缩放改变的是duration点击返回时间点是把鼠标 x 反算成时间再抛给业务层。插件把这三个动作拆成三个独立方法比揉在一个事件回调里靠谱得多后面加录像块、加标注、加播放头都不用动主干。我一般会先把这两个换算函数写成模块内的纯函数方便单元测试时直接喂数据验证边界比如startTime恰好等于某个录像块起点时的取整问题。常见做法是把画布分两层底层画刻度线、时间文字、播放头上层画录像块和拖拽反馈。单层也能做但每次拖动都要全量重绘底层的刻度文字帧率明显掉。分层之后拖动只重绘上层视觉上干净很多。分层不一定非要用两个 canvas也可以底层离屏缓存成图片拖动时直接drawImage贴上去具体选哪个看你的刷新频率。2.2 最小可用初始化代码下面这段是组件接入页面的骨架包含容器准备、选项注入和实例化。语言是 javascriptjQuery 只用来做 DOM 选择和事件绑定绘制全部走原生 canvas API。// 容器需要有确定的宽度canvas 宽高在初始化时读取 const $wrap $(#timeline-wrap); const timeline new CanvasTimeline($wrap, { startTime: Date.parse(2024-01-01T00:00:00), // 可视窗口起点毫秒 duration: 6 * 60 * 60 * 1000, // 可视窗口跨度6 小时 minDuration: 60 * 1000, // 最小缩放跨度1 分钟 maxDuration: 24 * 60 * 60 * 1000, // 最大缩放跨度1 天 tickCount: 8, // 主刻度目标数量 devicePixelRatio: window.devicePixelRatio || 1, // 高分屏适配 blocks: [] // 录像块数组后文单独说 }); // 业务侧只订阅两个回调就够了 timeline.on(change, (info) { // info: { startTime, duration } 可视窗口变化 renderLabel(info); }); timeline.on(clickTime, (ts) { // 点击返回的时间点毫秒时间戳 seekPlayer(ts); });参数说明startTime和duration决定初始视野业务上一般取「当前查询区间的起止时间」minDuration和maxDuration是缩放边界不设的话滚轮能把时间轴缩成一个点或者拉成无限大用户体验直接崩tickCount不是精确刻度数插件按这个目标值去挑「好看的步长」1 秒、5 秒、30 秒、1 分、5 分这种你给 8 它可能画 6 到 10 根devicePixelRatio一定要传否则在 2 倍屏上文字和细线全是糊的这是血泪经验级别的细节。高分屏适配的具体做法是canvas 的 CSS 尺寸设为容器实际宽高canvas.width/height设为物理像素 CSS 尺寸 × dpr然后ctx.scale(dpr, dpr)之后所有绘制坐标仍按 CSS 像素写。忘了这一步的典型症状是刻度线发虚、文字边缘毛糙很多人以为是字体问题其实全是 dpr 没处理。2.3 录像块的绘制与分层顺序录像块在数据结构上就是一组{ start, end, type }绘制前先按start排序然后逐个判断是否与可视窗口相交相交才画。不做这层裁剪几千个块每帧全画一遍中低端机器直接掉帧。// 绘制录像块先裁剪到可视区间再按时间映射成矩形 timeline.setBlocks function (rawBlocks) { this.blocks rawBlocks .filter(b b.end this.startTime b.start this.startTime this.duration) .sort((a, b) a.start - b.start); this.renderTopLayer(); // 只重绘上层 }; // 渲染单个块时注意最小宽度否则短录像在缩小时会消失 function drawBlock(ctx, block, view, y, h) { const x1 (block.start - view.startTime) / view.duration * view.width; const x2 (block.end - view.startTime) / view.duration * view.width; const w Math.max(x2 - x1, 1.5); // 最小 1.5px避免短块不可见 ctx.fillStyle block.type alarm ? #e05b3a : #3a7be0; ctx.fillRect(x1, y, w, h); }逻辑说明过滤条件用的是「块的结束时间大于窗口起点且开始时间小于窗口终点」两头都必须判只判一头会漏掉跨越窗口边界的块Math.max(..., 1.5)这行是实际项目里必须加的否则放大到分钟级时一个 3 秒的告警录像在缩小视图下宽度算出 0.05 像素等于没画用户会以为数据丢了。层序上录像块画在刻度之上、播放头之下这样播放头始终可见不会被色块盖住。3. 交互实现拖动、滚轮缩放与点击返回时间点3.1 拖动用按下时的快照算偏移别累加拖动的常见写法是每次mousemove都往startTime上加减增量这会导致误差累积拖久了时间轴和鼠标位置对不上也就是俗称的「飘」。正确做法是在mousedown时记下当时的鼠标 x 和startTime之后每次移动都用当前 x 减去起始 x换算成时间偏移后加到那个快照上。let drag null; $wrap.on(mousedown, function (e) { drag { x0: e.clientX, start0: timeline.startTime, // 快照不在移动中累加 moved: false }; }); $(document).on(mousemove, function (e) { if (!drag) return; const dx e.clientX - drag.x0; if (Math.abs(dx) 3) drag.moved true; // 超过阈值才算拖动用于区分点击 // 像素偏移换算成时间偏移方向与内容移动相反 const dt dx / $wrap.width() * timeline.duration; timeline.setView({ startTime: drag.start0 - dt, duration: timeline.duration }); }); $(document).on(mouseup, function (e) { if (drag !drag.moved) { // 位移没超阈值判定为点击反算时间点 const rect $wrap[0].getBoundingClientRect(); const ts timeline.startTime (e.clientX - rect.left) / rect.width * timeline.duration; timeline.emit(clickTime, ts); } drag null; });关键点有三个。mousemove和mouseup绑在 document 上而不是容器上否则鼠标拖出画布就丢事件时间轴会「粘住」不动。dt方向取反因为手指往右拖代表想看到更早的内容窗口起点应该往左移。moved阈值是区分拖动和点击的开关没有它轻微手抖就会误触发点击返回时间点播放器瞬间跳走这类反馈最伤用户信任。setView内部要做边界钳制startTime不允许小于数据最早时间也不允许大于数据最晚时间 - duration否则能拖出一片空白荒原。3.2 滚轮缩放以鼠标位置为锚点缩放最忌讳以窗口中心为锚点用户的直觉是「鼠标指向哪里哪里就不动」。实现方式是用鼠标 x 反算出锚点时间缩放前后让这个时间值保持在同一个像素位置。$wrap.on(wheel, function (e) { e.preventDefault(); // 阻止页面跟着滚 const rect $wrap[0].getBoundingClientRect(); const px e.clientX - rect.left; const ratio px / rect.width; // 锚点时间缩放前后都停在同一像素位置 const anchorTs timeline.startTime ratio * timeline.duration; const factor e.deltaY 0 ? 1.15 : 1 / 1.15; // 滚一格约 ±15% const next clamp(timeline.duration * factor, timeline.minDuration, timeline.maxDuration); // 由锚点反推新的起点 const nextStart anchorTs - ratio * next; timeline.setView({ startTime: nextStart, duration: next }); });factor取 1.15 是我反复试出来的1.05 太小滚半天没反应1.3 太猛一格就从小时级跳到分钟级细节全丢。clamp必须做不然滚到极值后继续滚duration变成负数或者 0映射公式直接除零。另外preventDefault别忘了否则时间轴在滚动页面里时交互会和页面滚动打架用户以为插件坏了。移动端还要单独处理touchstart/touchmove双指间距换算成缩放因子单指移动换算成拖动并区分滑动方向和纵向滚动。这里不加touch-action: none在容器上浏览器默认手势会抢事件缩放会卡顿甚至只响应一次。3.3 时间刻度自适应别固定步长刻度步长要随duration变写死 1 小时的话缩到 1 分钟视图时整条轴上一根线都没有。做法是维护一个候选步长数组从 1 秒到 24 小时选第一个满足「像素间隔 ≥ 60px」的步长。const STEPS [1e3, 5e3, 1e4, 3e4, 6e4, 3e5, 6e5, 1.8e6, 3.6e6, ...]; // 毫秒 function pickStep(width, duration, minGap 60) { const pxPerMs width / duration; return STEPS.find(s s * pxPerMs minGap) || STEPS[STEPS.length - 1]; }minGap60px 是留给时间文字的空间标签格式一般要按步长切换秒级显示HH:mm:ss小时级只显示HH:mm天级显示MM-DD。这一步不做文字会挤成一坨黑块。4. 避坑清单接入这类时间轴时最容易翻车的几处4.1 现象拖动时时间轴发飘越拖越偏原因移动中累加增量且mousemove绑在容器上鼠标出界丢事件。解决改成按下时快照start0加相对偏移事件绑到 document并在mouseup里清理状态。如果中途有其他逻辑改了startTime比如外部调setView还要在mousedown里重新取快照。4.2 现象高频拖动下画面撕裂、掉帧明显原因每个mousemove都同步重绘底层刻度文字一帧内重绘多次。解决用requestAnimationFrame把手势状态标脏、下一帧统一绘制拖动期间只画上层底层刻度缓存复用。顺带一提mousemove里不要做 DOM 查询$wrap.width()这种结果在拖动开始时缓存好。4.3 现象高分屏上刻度和文字发虚像蒙了一层雾原因没处理devicePixelRatio。解决按 2.2 节的方式设置物理像素尺寸再scale。注意resize之后要重设一遍并且ctx.scale不是累积的重建上下文尺寸后需要重新调用漏了这一步窗口拉大就又糊。4.4 现象录像块被时间轴「吃掉」缩小时看不见原因小时间跨度的块算出的宽度小于 1 像素被浏览器当成不绘制。解决Math.max(w, 1.5)兜底并在setBlocks里做可视区间裁剪和按start排序避免重叠块之间互相遮盖时顺序随机。4.5 现象点击返回时间点经常跳错位置原因坐标用了e.clientX直接减容器左边没考虑页面滚动和容器padding/border。解决一律用getBoundingClientRect()取真实位置反算前把容器内边距扣掉同时用拖动阈值过滤误触否则用户想拖结果播放器跳了。5. 进阶与验证把插件塞进真实回放业务的几个技巧插件跑起来只是开始落到回放面板还得处理三件具体的事。第一件是时间轴与播放器双向同步播放器timeupdate时只更新播放头位置不能调setView否则用户正在拖动时视野被播放进度拽走手感全毁。我一般会加一个isDragging标志拖动期间忽略外部视野变更请求松手后按需对齐。第二件是录像块数据量大的时候做分片加载。可视窗口变化超过一定幅度比如duration变了 30% 以上或者startTime位移超过半个窗口才向接口请求该区间的新块拖动过程中不请求。请求回来先用setBlocks合并入现有数组按start排序后去重去重键用start end type组合。第三件是缩放后的刻度文字对齐。放大到秒级时如果还按整分钟取整刻度和录像块的起止点会错位看起来像数据不准。验证方法很土但有效造几条首尾相接的录像块比如 9:00-9:05、9:05-9:10把视图缩放到刚好覆盖这两块看接缝处有没有空隙或重叠再把startTime设成一个非整分钟的值看刻度标签是否还落在整点位置上。下面这段是双向同步的骨架可以照着改// 播放进度只动播放头不动视野 player.on(timeupdate, () { if (timeline.isDragging) return; // 拖动期间不抢视野 const t player.currentTime * 1000; timeline.setPlayhead(t); // 播放头超出可视窗口时才平移视野 const viewEnd timeline.startTime timeline.duration; if (t timeline.startTime || t viewEnd) { timeline.setView({ startTime: t, duration: timeline.duration }); } });参数上有个细节t viewEnd的判断建议留 5% 的余量不然播放头一贴边就触发平移视野会不停小幅跳动观感很糟。另外录像块点击、告警定位这类跳转跳之前先setPlayhead再setView顺序反了会闪一下旧位置。验证清单我固定跑三遍一是把duration从 24 小时一路缩到 1 分钟观察刻度步长切换和文字格式是否跟得上二是造 5000 个随机短块拖动看帧率三是在 2 倍屏和普通屏各截一次图比对线条清晰度。从那以后我每次接时间轴类需求都强制先把「时间↔像素」两个纯函数抽出来写测试再动交互层因为这条映射一旦错了后面所有玄学问题都会算到你头上。希望帮到你。本文还有配套的精品资源点击获取