用途
example-canvas 属于 Helios 项目中的示例与模式文档，主题是“Vanilla Canvas Patterns”，即如何把 Helios 直接与原生 HTML5 Canvas API 配合使用。按资料说明，这种方式开销最低、性能最高，适合在不引入框架的前提下构建高性能的 2D/3D 动画。
主要能力与工作方式
资料展示的流程分为三步：
- HTML 准备：在页面中放置
<canvas id="canvas"></canvas>，并用<script type="module" src="./main.js"></script>引入逻辑脚本。 - 逻辑初始化：从
@helios-project/core导入Helios，获取 canvas 与 2D 上下文，设置画布宽度与高度（示例为 1920×1080），然后创建 Helios 实例并传入duration: 5与fps: 60，调用helios.bindToDocumentTimeline()绑定到文档时间线，并把实例挂到window.helios。 - 绘制与订阅：定义
draw(frame)函数，在其中清空画布、根据帧号换算时间与进度（time = frame / helios.fps，t = time / helios.duration），再执行具体绘制（示例为一个随进度水平移动的矩形）。最后通过helios.subscribe((state) => draw(state.currentFrame))在状态更新时重绘，并调用draw(0)做初始渲染。
性能建议
资料给出三条建议：预计算耗时数值（如正弦表或物理模拟）以降低每帧计算量；对非常复杂的场景可考虑在 Web Worker 中使用 OffscreenCanvas 渲染，以释放主线程；批量绘制调用，尽量减少 fillStyle、strokeStyle 等上下文状态切换。
适用场景
适合需要直接控制 Canvas 绘制循环、追求较低开销的动画场景，例如不依赖框架的逐帧 2D 动画，以及与时间线同步的 Canvas 渲染。资料标题提到 2D/3D，但正文示例仅展示 2D 上下文用法，3D 的具体实现暂未提供。
限制与未提供信息
资料为示例与模式说明，未提供安装命令、依赖版本要求、浏览器兼容性、收费标准或平台信息；错误处理、事件清理等细节也未说明。具体项目结构仅注明示例位于 examples/simple-canvas-animation/。