本文详解如何将用户手绘轨迹坐标完整记录并逐帧回放，通过分离绘制逻辑、清空画布、控制动画节奏及复用贝塞尔曲线插值算法，实现流畅自然的重绘效果。
本文详解如何将用户手绘轨迹坐标完整记录并逐帧回放，通过分离绘制逻辑、清空画布、控制动画节奏及复用贝塞尔曲线插值算法，实现流畅自然的重绘效果。
在 html5 canvas 中实现“录制—回放”式绘图功能，关键在于行为解耦与时序可控。原始代码中，draw() 函数同时承担事件响应、坐标采集、路径构建与渲染绘制四重职责，导致回放时无法复现平滑曲线（如 bezierCurveTo 所需的控制点序列），且未清空画布、缺乏终止条件，造成画面残留与无限递归风险。
✅ 核心改进策略
-
逻辑分离：提取通用绘制函数 add(x, y)
将所有与 Canvas 渲染相关的操作（设置样式、维护贝塞尔控制点、调用 bezierCurveTo）封装为独立函数 add()。该函数不依赖事件对象，仅接收坐标参数，既服务于实时绘制，也支撑回放流程，确保行为一致性。 -
画布重置：回放前调用 clearRect()
每次点击“重绘按钮”时，必须先清空画布，避免新旧轨迹叠加。使用 context.clearRect(0, 0, canvas.width, canvas.height) 安全擦除，而非 ctx.save()/restore()（后者仅影响状态栈，不清理像素）。 -
动画节制：基于 requestAnimationFrame 的受控循环
play() 内部的 steps() 递归调用需显式终止：仅当 step
? 关键代码实现
以下为重构后的核心逻辑（已兼容桌面鼠标与触控事件）：
// 全局上下文缓存（提升性能） const canvas = document.getElementById('surface'); const ctx = canvas.getContext('2d'); // 坐标存储数组（由 draw() 实时 push） const coordinates = []; // 【新增】统一绘制函数：接受坐标，复用原平滑曲线逻辑 function add(x, y) { ctx.shadowColor = "rgba(0,0,0,.5)"; ctx.shadowBlur = 2; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = 2; ctx.strokeStyle = 'red'; if (!inProgress) { ctx.beginPath(); ctx.moveTo(x, y); inProgress = true; skip1 = true; skip2 = false; } else { if (skip1) { cp1x = x; cp1y = y; skip1 = false; skip2 = true; } else if (skip2) { cp2x = x; cp2y = y; skip1 = false; skip2 = false; } else { // 关键：复用三次贝塞尔插值，保持线条柔顺 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); skip1 = true; skip2 = false; } } ctx.stroke(); } // 【重放主函数】 function play() { // ✅ 步骤1：清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); let step = 0; function steps() { // ✅ 步骤2：逐点调用 add() if (step < coordinates.Length) { const { x, y } = coordinates[step]; add(x, y); step++; // ✅ 步骤3：受控递归（非无限） window.requestAnimationFrame(steps); } } steps(); // 启动动画 } // 【绑定事件】 document.getElementById('coordinatesDrawBtn').addEventListener('click', play); document.getElementById('coordinatesBtn').addEventListener('click', () => { console.log('Recorded points:', coordinates); });⚠️ 注意事项与最佳实践
-
坐标精度保障：e.offsetX/Y 在部分浏览器中存在兼容性问题，生产环境建议改用 getBoundingClientRect() 计算相对位置：
立即学习“前端免费学习笔记（深入）”；
const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; -
性能优化：若轨迹点极多（>5000），可考虑分批渲染（如每帧处理 20 点），避免单帧耗时过长导致卡顿。
-
状态隔离：inProgress, skip1, skip2, cp1x 等变量在重放时需与实时绘制共用同一套状态机——这正是 add() 复用的价值。切勿在 play() 中重置这些变量，否则控制点序列断裂，曲线将退化为折线。
-
响应式适配：canvas.width/height 应基于 CSS 像素而非 clientWidth/clientHeight，避免设备像素比（DPR）导致模糊。推荐写法：
function resizeCanvas() { const dpr = window.devicePixelRatio || 1; canvas.width = canvas.clientWidth * dpr; canvas.height = canvas.clientHeight * dpr; ctx.scale(dpr, dpr); }
✅ 总结
实现 Canvas 绘图回放的本质，是将隐式交互过程转化为显式数据流 + 可控执行流。通过提取 add() 解耦渲染逻辑、强制 clearRect() 保证画布洁净、用 requestAnimationFrame + 边界判断实现精准帧控，即可完美复现带贝塞尔平滑的书写轨迹。此模式亦可扩展至撤销/重做、协作白板、动画导出等场景，是 Canvas 高级应用的坚实基础。