Canvas vs WebGL2
Rive 的 Web 运行时有两个主要包：@rive-app/webgl2 和 @rive-app/canvas。它们暴露相同的 API。唯一的区别是绘制方式。
对于大多数用例，请使用 @rive-app/webgl2。 它使用 Rive 渲染器绘制，与 Rive 编辑器使用的渲染器相同，因此你在 Rive 中创作的所有内容都会按你设计的方式渲染。@rive-app/canvas 使用浏览器自己的 2D 渲染器，这带来了它自己的优势（特别是性能方面），但尚未支持所有编辑器功能。
切换只需要更改一行导入，因此你可以尝试两者并针对自己的内容进行比较。
对比
@rive-app/webgl2（推荐） | @rive-app/canvas | |
|---|---|---|
| 绘制方式 | 在 WebGL2 上使用 Rive 渲染器 | 使用浏览器的 Canvas2D API |
| 矢量羽化 | ✅ 支持 | ❌ 尚不支持；计划在未来版本中支持 |
| 编辑器保真度 | ✅ 与 Rive 编辑器使用相同的渲染器 | 🟡 几乎所有内容都匹配（参见填充规则） |
| 混合模式 | 🟡 支持所有混合模式，但**正常（Normal）**以外的任何模式都很消耗性能（参见性能） | ✅ 支持所有混合模式，无额外开销 |
| 每页图形数量 | 🟡 受浏览器 WebGL 上下文数量限制（参见WebGL 上下文限制） | ✅ 无实际限制 |
其他值得注意的权衡
WebGL 上下文限制
请注意，如果你使用 @rive-app/webgl2，浏览器会限制页面可以同时持有的 WebGL 上下文数量。确切的数量因浏览器和设备而异，达到上限后通常会丢弃最旧的上下文——这会限制你可以运行多少个 new Rive({...}) 实例。更多详情请参见 WebGL Context Limits。
如果你在一个页面上显示多个图形，请在每个 Rive 对象上设置 useOffscreenRenderer: true。这样每个实例共享一个离屏上下文，而不是创建自己的上下文，从而避免超过上限：
const r = new rive.Rive({
src: "https://cdn.rive.app/animations/vehicles.riv",
canvas: document.getElementById("canvas"),
artboard: "Truck",
stateMachine: "bumpy",
useOffscreenRenderer: true,
});
此限制不适用于 @rive-app/canvas。
填充规则
@rive-app/canvas 使用 Canvas2D 渲染器，它提供非零和奇偶 填充规则，因此 Rive 的顺时针填充规则会绘制为非零。结果完全相同，除非路径具有自相交、反向或重叠的轮廓。这适用于填充和裁剪路径。
性能
目前，@rive-app/webgl2 通过多重采样抗锯齿（MSAA）路径绘制。
Rive 渲染器有一条更快的绘制路径，依赖于 Metal 和 Vulkan 已向原生应用暴露的 GPU 能力。在 Web 浏览器上，它来自 WEBGL_shader_pixel_local_storage，这是 Rive 正在帮助标准化的 WebGL 草案扩展。随着浏览器采用它，@rive-app/webgl2 将自动使用它并绘制得更快。
在此之前，混合模式是你可能会注意到差异的地方。在 MSAA 路径上，任何**正常（Normal）**以外的混合模式都会强制渲染器在绘制时重新读取帧，这在移动浏览器上成本会迅速增加。@rive-app/canvas 没有 equivalent 成本，因为 Canvas2D 原生混合。
在实践中：
- 移动设备上的混合模式是
@rive-app/canvas可以明显更快的情况。如果你的文件依赖混合模式且不使用矢量羽化，值得比较两者。 - 在真实设备上测量。切换包只需要一行更改，因此测试两者成本很低。
Canvas 包变体
如果你特定的打包需求，Canvas 包有两个变体可用。
@rive-app/canvas-lite
@rive-app/canvas-lite 是最小的 Rive Web 包。它具有与 @rive-app/canvas 相同的 API 和渲染器，但移除了文本、布局、音频和脚本引擎以节省空间。
当你的文件不依赖这些功能时使用它。如果文件确实使用了它们，受影响的内容将不会显示。
@rive-app/canvas-single
@rive-app/canvas-single 将 rive.wasm 直接打包到 JavaScript 文件中，因此加载 Rive 只需要一个网络请求而不是两个。
当你希望避免单独的 WASM 请求时使用它。权衡是更大的 JavaScript 包。
已弃用的包
@rive-app/webgl 已弃用，在 v2.37.0 之后不再接收更新。请迁移到 @rive-app/webgl2，或者如果你的文件不需要 Rive 渲染器，则迁移到 @rive-app/canvas。这两种迁移都不需要 API 更改 —— 请参阅迁移指南。