Canvas骨骼动画靠自行实现骨骼变换、顶点混合与插值逻辑，主流用requestAnimationFrame驱动+矩阵运算更新transform，配合save/restore或手动顶点计算绘制；SVG无原生骨骼支持，仅能通过嵌套和JS/CSS驱动transform模拟简单层级，无法实现蒙皮、权重混合与IK。
Canvas 骨骼动画靠什么实现？
Canvas 本身不支持骨骼层级、蒙皮或 IK 计算，所有骨骼变换、顶点混合、插值逻辑都得自己写。主流方案是用 requestAnimationFrame 驱动时间轴，配合矩阵运算（DOMMatrix 或自定义 2D/3D 矩阵）更新每个骨骼的 transform，再用 ctx.save()/ctx.restore() 或手动计算顶点坐标绘制蒙皮网格。
常见错误现象：ctx.drawImage() 直接贴图导致形变撕裂、骨骼旋转中心偏移、关键帧跳变、性能卡在每帧遍历 100+ 关节上。
- 用
Float32Array存储关节位置和权重，避免频繁创建对象 - 骨骼层级深时，优先用父→子单向递推，别反复查
parent引用 - 避免每帧调用
ctx.setTransform(...)超过 20 次；改用预合成的全局变换矩阵 + 批量 drawImage - WebGL 上可用
WebGLRenderingContext.drawElements()渲染带权重的顶点缓冲，但需自己解析 Spine 或 DragonBones 的 JSON 导出格式
SVG 骨骼动画是否真能“开箱即用”？
SVG 本身没有骨骼模型，<g></g> 嵌套 + transform 属性只能模拟简单层级，无法表达蒙皮、权重混合、IK 反向动力学。所谓“SVG 骨骼动画”，实际是把骨骼结构转成 SVG 元素树，再用 CSS @keyframes 或 SMIL（已废弃）驱动 transform，或用 JS 每帧修改 element.transform.baseVal。
使用场景受限明显：适合静态姿势切换、低自由度角色（如图标级小人）、或仅需位移/旋转/缩放的简化骨骼链。
立即学习“Java免费学习笔记（深入）”；
-
SMIL在 Chrome 119+ 已完全移除，Safari 早就不支持，不能依赖 - CSS 动画无法动态插值旋转轴心（
transform-origin是静态的），肩关节绕锁骨旋转会错位 - SVG 元素过多（>50 个
<path></path>）时，JS 修改transform属性的重排开销比 Canvas 绘制更高 - 若用
getScreenCTM()反查世界坐标做碰撞检测，精度受缩放影响，需手动归一化
Spine/DragonBones 导出格式在两种方案中的适配成本
Spine 的 .json 或 .skel、DragonBones 的 .json 都含完整骨骼层级、插槽、皮肤、动画曲线、蒙皮权重。Canvas 方案有成熟运行时：spine-canvas（官方轻量版）、pixi-spine；SVG 方案无对应生态，必须自行解析 JSON 并映射到 <g></g> 结构，且无法还原顶点变形。
参数差异直接影响可行性：
- Spine 的
weighted和softness参数在 SVG 中无等价表现，只能降级为硬边绑定 - DragonBones 的
zOrder在 SVG 中需手动维护appendChild()顺序，动画中 z 序变化会触发大量 DOM 重排 - 两者都依赖贝塞尔插值曲线（
curve字段），Canvas 可用lerp+ 缓动函数复现，SVG 的 CSSanimation-timing-function仅支持 cubic-bezier(0.1, 0.7, 1.0, 0.1)，无法加载任意控制点
性能与兼容性怎么选？
Canvas 在中低端 Android 设备上帧率更稳（尤其开启 will-change: transform 后），SVG 在 Safari iOS 上滚动时易触发重绘抖动。但 Canvas 无法直接响应鼠标事件到具体骨骼部件，需自己做射线拾取；SVG 天然支持 addEventListener('click') 到每个 <path></path>，交互开发快。
可给出简短判断依据：
- 需要运行商业级 2D 动画（如游戏 UI、广告 banner）→ 选 Canvas +
spine-canvas - 只需 3~5 个关节的示意动画（如教程箭头、数据流程图肢体）→ SVG + JS 驱动
transform更轻量 - 要 SEO 或可访问性（
aria-label、focusable）→ SVG 是唯一选择，Canvas 需额外加role="img"和文本替代 - 目标环境含 IE11 → Canvas 用
canvas.getContext('2d')兼容性好，SVG 的transform.baseVal在 IE 中行为异常
const spine = new spine.CanvasSkeletonRenderer(canvas);
spine.skeletonData = skeletonJson;
spine.animationState.setAnimation(0, 'idle', true);
function render() {
spine.update(0.016); // delta time
spine.render();
requestAnimationFrame(render);
}
真正容易被忽略的是：Canvas 骨骼动画一旦启用 WebGL 后备（如 PixiJS），就无法再用 toDataURL() 导出 PNG；而 SVG 虽然能直接 outerHTML 保存，但导出后丢失所有 JS 驱动的动画状态——不是“哪种更合适”，而是“你准备为哪条链路让渡控制权”。
