本文详解如何将用户手绘轨迹坐标完整记录并逐帧回放，通过分离绘制逻辑、清空画布、控制动画节奏及复用贝塞尔曲线插值算法，实现流畅自然的重绘效果。
本文详解如何将用户手绘轨迹坐标完整记录并逐帧回放，通过分离绘制逻辑、清空画布、控制动画节奏及复用贝塞尔曲线插值算法，实现流畅自然的重绘效果。
在 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 高级应用的坚实基础。
