• Y AnimationPlayground
研究工作台
  • 实验总览
    • D3
    • Lottie
    • Rive
    • Canvas
示例库
  • 示例总览
  • Three.js 示例
  • Shader 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

Canvas

v0.4 参考实现

研究即时模式绘制、高密度场景、粒子与帧预算。

查看旗舰作品查看技术选型
Canvas 即时绘制rAF + refsDPR 最大 2×
高密度图元与帧预算
粒子位置留在可变引用中,每 500ms 才把性能遥测同步到 React。
粒子密度
估算 FPS
0
最近一帧
0 ms
图元数量
360
实际 DPR
1×

交互方式

在画布上移动指针可排斥附近粒子。切换密度后会重新建立确定性的粒子集合,避免 React 逐帧重渲染。

预算规则

60fps 的单帧预算约 16.7ms。真实产品还需要在低端设备测量长任务、输入延迟和电量,而不是只看桌面开发机的 FPS。

高密度即时绘制

单个 canvas 承载大量图元,避免为每个粒子创建 DOM 节点。

逐帧状态隔离

位置、速度和指针留在 refs 中,只把低频遥测交给 React。

显示密度治理

ResizeObserver 与 DPR 上限共同维持清晰度、显存和绘制成本的平衡。

实验结论

Canvas 适合图元很多、每帧都变化、DOM 语义价值很低的视觉层。它用一个绘制表面换来吞吐量,也同时放弃了元素级布局、可访问性和原生事件模型;因此应该被当成受预算约束的视觉运行时,而不是常规 UI 的默认选择。

应该负责

  • 高密度粒子、轨迹、场景背景与实时绘制。
  • 在明确帧预算下处理逐帧状态和指针反馈。

不应该负责

  • 不绘制需要原生语义、键盘焦点或文本选择的界面。
  • 不把逐帧数据同步进 React state 触发组件树重渲染。