• Pixi.js: 它是为游戏而生的。擅长搬运图片（Sprites）、处理粒子特效、高帧率渲染。它的矢量绘图能力是“附赠”的。

• CanvasKit (Skia): 它是为操作系统 GUI 而生的。它是 Chrome 和 Android 的底层绘图引擎。它的矢量绘图能力是“核心”。

1. 核心差异：矢量处理能力 (Vector Capability)

• Pixi.js (WebGL):
• 原理： WebGL 本质上只能画三角形。当你用 Pixi 画一个圆形或复杂的贝塞尔曲线时，Pixi 在 CPU 层面把这个形状“三角剖分” (Tessellation) 成无数个小三角形，然后交给 GPU 渲染。
• 痛点：
• 抗锯齿 (Antialiasing): 在 WebGL 中做完美的矢量抗锯齿很难，放大后边缘可能会有点“糊”或有锯齿。
• 复杂路径运算： Lottie 有一个核心功能叫 Merge Paths (布尔运算)，比如“圆形减去矩形”。Pixi 没有内置这个算法，你需要引入 paper.js 或 clipper-lib 自己算几何，非常痛苦且慢。
• 描边 (Strokes): Lottie 支持虚线、端点样式（Round Cap/Butt Cap）。Pixi 的 Graphics 对这些支持有限，或者渲染效果与 AE 原生不一致。

• CanvasKit (Skia WASM):
• 原理： 它直接运行 Skia 的 C++ 代码。它处理贝塞尔曲线、路径裁剪、布尔运算是原生级别的。
• 优势：
• 完美还原： 它的渲染结果和 Chrome 浏览器、Android 手机、After Effects 几乎像素级一致。
• PathOps: 它内置了强大的路径运算。你想做“两个形状相交取差集”，调用 SkPath.op() 瞬间搞定，不用自己写数学库。
• 特效： 它是少数能在 Web 上高性能实现“高斯模糊 (Gaussian Blur)”和复杂“混合模式 (Blend Modes)”的引擎，这在 Lottie 中很常用。

结论： 做矢量编辑，CanvasKit 是降维打击。

2. 开发范式：保留模式 vs 立即模式

• Pixi.js (Retained Mode - 保留模式):
• 风格： 面向对象。
• 代码： stage.addChild(sprite)。你把东西加进去，只要不删，它就在那。你修改 sprite.x = 100，下一帧它自动动。
• 体验： 对前端开发者非常友好，符合直觉。

• CanvasKit (Immediate Mode - 立即模式):
• 风格： 绘图指令。
• 代码： 你必须写一个 draw() 函数，每秒运行 60 次。
• 逻辑： canvas.drawRect(...)。下一帧如果你不再次调用这行代码，屏幕上就没东西了。
• 体验： 硬核。你需要自己管理所有的对象状态、层级循环、点击检测（Hit Testing）。你需要构建自己的 Scene Graph（场景图）。

结论： Pixi.js 开发效率高 50%；CanvasKit 需要你手动造轮子（构建引擎底层）。

3. 性能与包体积

• 包体积：
• Pixi.js: 轻量，gzip 后大概 100KB+。加载秒开。
• CanvasKit: 沉重。WASM 文件大概 3MB - 5MB (gzip后)。用户首次打开编辑器需要加载 loading 条。虽然可以用 CDN 缓存，但确实是个门槛。

• 运行时性能：
• 大量物体： 如果画面上有 5000 个简单的粒子，Pixi (Batch Rendering) 完胜。
• 复杂矢量： 如果画面上有 50 个形状极其复杂的矢量图（带动态模糊、动态裁剪），CanvasKit 完胜。WebGL 处理复杂矢量需要大量的 CPU 三角剖分计算，容易卡顿。

4. 行业标杆怎么选？

• Figma: 使用 C++ (WebGL/WASM) 自研引擎（类似 CanvasKit 的路线）。因为他们必须保证矢量渲染的精确度。

• Rive (Lottie 的强力竞品): 使用 Skia (CanvasKit)。他们的 Web 运行时极其流畅。

• Canva: 早期是 canvas 2d，后期大量转向 WASM 技术。

顾问的最终建议：如何抉择？

方案 A：选择 Pixi.js (推荐作为起步)

• 理由： 你只有一个人。CanvasKit 的立即模式开发难度太高，会让你在处理“鼠标点击选中一个物体”、“拖拽改变层级”这种基础交互上卡很久。Pixi 的对象模型能帮你省掉这部分工作。

• 妥协： MVP 版本暂时不支持复杂的“路径布尔运算”和高级混合模式。先做基础的位移、缩放、透明度动画。这些 Pixi 足够了。

• 适合： 快速验证商业模式，做偏“排版和组合”的编辑器。

方案 B：选择 CanvasKit (推荐作为长期目标/技术壁垒)

• 理由： 你想做一个真正专业级的 Lottie 编辑器，对标 AE 的矢量能力。你无法容忍“画出来的圆不够圆”或者“不支持虚线描边”。

• 代价： 你的前 2 个月可能都在写底层引擎（如何管理对象、如何实现重绘循环、如何做点击检测），产出很慢。

• 适合： 你有极强的极客精神，且不急着马上上线变现，想打造技术护城河。

💡 折中方案 (我的独家建议)

• Konva 是基于原生 Canvas 2D API 的封装库。

• Canvas 2D API 本身就是支持矢量的（ctx.bezierCurveTo），而且支持虚线、描边，比 WebGL (Pixi) 在矢量方面更听话，更像 Lottie。

• 虽然性能不如 WebGL，但在几百个图层以内，现代浏览器的 Canvas 2D 硬件加速已经非常快了。

• 迁移路径： 它的 API 风格和 Pixi 很像。等你发现 Canvas 2D 性能不够用了，再重写为 Pixi 或 CanvasKit。但在初期，它能帮你最快搞定“矢量编辑”的逻辑。

1. 求快、求稳、做MVP： 选 Pixi.js (或者 Konva)。

2. 求完美、求技术壁垒、对标 Figma： 选 CanvasKit。