Canvas实现运动模糊需模拟视觉残留，常用半透明残影叠加法：用低透明度色块覆盖画布而非清空，再绘新帧；或基于历史坐标队列手动绘制渐隐轨迹；亦可用离屏Canvas缩放插值生成软边效果。
Canvas动画中实现运动模糊，核心不是直接绘制模糊效果，而是模拟人眼或相机在物体快速移动时的视觉残留——通过连续绘制衰减的轨迹帧来达成。HTML5 Canvas本身不支持内置高斯模糊滤镜（filter: blur()）作用于单个绘图操作，但可通过多层叠加、透明度渐变和历史帧缓存等策略高效模拟。
用半透明残影叠加模拟运动模糊
这是最常用且性能友好的方法：每一帧不完全清空画布，而是用带透明度的黑色（或背景色）覆盖全画布，再绘制当前物体。上一帧的图像因未被完全擦除而自然留下淡出残影。
- 清屏时不调用
ctx.clearRect(0,0,w,h)，改用ctx.fillStyle = 'rgba(0,0,0,0.1)'; ctx.fillRect(0,0,w,h);（透明度0.05–0.2之间可调，值越小拖尾越长） - 随后正常绘制运动中的图形（如小球），位置随时间更新
- 透明度越低，残影保留越多，模糊感越强；但过低会导致画面发灰，需根据帧率和速度平衡
基于历史坐标队列的手动轨迹绘制
适合对模糊形态有精确控制的场景（如强调方向性拖尾）。维护一个坐标点数组，记录物体最近N次的位置，按距离当前帧由远到近、透明度由低到高依次绘制多个缩放/淡化版本。
- 每帧将当前坐标
push()入队，超出预设长度（如10–20点）则shift()删除最老点 - 反向遍历该队列，对每个点绘制一个更小、更透明的副本（例如：
alpha = i / queue.length * 0.7，scale = 0.4 + i / queue.length * 0.6） - 适用于粒子、光剑、笔触等需要清晰拖尾轮廓的效果
结合离屏Canvas做轻量级“伪模糊”预处理
若需更接近真实模糊的软边效果，可用离屏Canvas预先绘制高分辨率轨迹，再缩放+合成到主画布，利用双线性插值产生自然柔化。
- 创建离屏Canvas（如2×宽高），在其上用粗线宽、圆头线帽绘制运动路径：
ctx.lineCap = 'round'; ctx.lineWidth = 8; - 将离屏Canvas以
drawImage缩放到目标尺寸（如0.5倍），浏览器自动插值，边缘变柔和 - 再以一定透明度（如
globalAlpha = 0.3）绘制到主画布，叠加在主体之上 - 开销略高于纯透明叠加，但视觉质量更可控，适合关键动态元素
注意事项与性能提醒
运动模糊本质是增加每帧绘制量，需警惕性能下降，尤其在低端设备或复杂场景中。
- 避免在每帧中新建Canvas或反复创建Image对象；离屏Canvas应复用
- 残影透明度衰减法在60fps下表现稳定，但若帧率波动（如掉到30fps），拖尾会变长——可绑定到时间戳而非帧数做自适应衰减
- 不要对整帧应用
ctx.filter = 'blur(2px)'（仅Chrome支持，且严重拖慢Canvas 2D渲染） - WebGL（如Three.js）中可用后处理通道实现真正高斯模糊，但Canvas 2D环境应坚持“视觉模拟”而非“像素计算”思路
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
