Canvas路径动画平滑的关键是按时间或距离采样路径点并逐帧移动：需路径参数化（直线/贝塞尔/SVG）、弧长归一化、requestAnimationFrame驱动+缓动函数+亚像素渲染。
Canvas 中实现平滑的路径动画（FollowPath），关键不在于“一帧画整条路径”，而在于**按时间或距离采样路径上的点，让目标对象逐帧移动到这些采样点**。直接用 lineTo 画线再重绘无法形成“跟随”效果；真正平滑的核心是：**插值 + 帧同步 + 路径参数化**。
把路径转成可计算的点序列（参数化）
Canvas 的 beginPath/bezierCurveTo 等只负责绘制，不提供坐标查询能力。要让物体“走在路径上”，必须自己构建路径的数学表示：
- 直线段：用两点插值，
p(t) = p0 + t * (p1 - p0)，t ∈ [0,1] - 贝塞尔曲线（二次/三次）：用 De Casteljau 算法或直接公式求任意
t对应坐标 - 复杂路径（如 SVG path）：可借助开源库（如
svg-path-parser+path-data-js）解析并分段参数化
推荐对每一段都统一归一化为“弧长参数”（即 t=0.5 表示走完一半总长度），否则匀速运动在曲率变化大处会明显忽快忽慢。
用 requestAnimationFrame 驱动时间步进
避免用 setInterval，它不与屏幕刷新同步，易掉帧或卡顿：
- 记录起始时间（
startTime = performance.now()） - 每帧计算已过时间占比：
progress = Math.min((now - startTime) / duration, 1) - 将
progress输入路径参数函数，得到当前坐标{x, y} - 清空画布（
clearRect）→ 绘制背景 → 绘制移动对象（如小圆、图标）
提升视觉平滑度的实用技巧
仅靠线性插值可能生硬，尤其路径含锐角或高曲率时：
-
加缓动函数：把
progress替换为easeInOutCubic(progress)（如t * t * t * (t * (6 * t - 15) + 10)），让启停更自然 -
开启抗锯齿：确保
ctx.imageSmoothingEnabled = true（默认开启，但缩放时需确认） -
启用 subpixel 渲染：坐标用浮点数（如
x: 123.45），不要四舍五入到整数，Canvas 会自动做亚像素混合 - 预渲染路径到离屏 canvas：若路径静态且复杂，先画到一个不可见 canvas，动画中只复制该 canvas 区域，减少重复路径计算
一个极简可运行示例（三次贝塞尔路径）
以下代码片段可直接运行，展示小球沿三次贝塞尔曲线匀速移动：
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const P0 = {x: 50, y: 200}, P1 = {x: 150, y: 50}, P2 = {x: 250, y: 350}, P3 = {x: 350, y: 200};
const duration = 3000; // 动画总时长 ms
let startTime = null;
<p>function bezier3(t, p0, p1, p2, p3) {
const u = 1 - t;
return {
x: u<em>u</em>u<em>p0.x + 3</em>u<em>u</em>t<em>p1.x + 3</em>u<em>t</em>t<em>p2.x + t</em>t<em>t</em>p3.x,
y: u<em>u</em>u<em>p0.y + 3</em>u<em>u</em>t<em>p1.y + 3</em>u<em>t</em>t<em>p2.y + t</em>t<em>t</em>p3.y
};
}</p><p>function animate(now) {
if (!startTime) startTime = now;
const elapsed = now - startTime;
const t = Math.min(elapsed / duration, 1);</p><p>ctx.clearRect(0, 0, canvas.width, canvas.height);
// 可选：绘制路径轮廓（灰色虚线）
ctx.beginPath();
ctx.moveTo(P0.x, P0.y);
ctx.bezierCurveTo(P1.x, P1.y, P2.x, P2.y, P3.x, P3.y);
ctx.strokeStyle = '#ccc'; ctx.stroke();</p><p>// 计算当前位置并绘制小球
const pos = bezier3(t, P0, P1, P2, P3);
ctx.beginPath();
ctx.arc(pos.x, pos.y, 6, 0, Math.PI * 2);
ctx.fillStyle = '#3498db';
ctx.fill();</p><p>if (t </p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
