@canvas-components/stats

用于观察 Canvas 绘制状态的轻量性能监视器。组件使用原生 DOM 与 Canvas 实现，不依赖 React 或其他框架运行时。

import { Stats } from "@canvas-components/stats";

const stats = new Stats();
document.body.append(stats.dom);

function render() {
  stats.begin();
  drawCanvas();
  stats.end();
  requestAnimationFrame(render);
}

requestAnimationFrame(render);

也可以记录已有渲染埋点：

const stats = new Stats();

const debug = {
  onPerformance(metric: { phase: string; durationMs: number }) {
    if (metric.phase === "render") {
      stats.recordDraw(metric.durationMs);
    }
  },
};

点击面板可在 FPS、FRAME 和 DRAW 三个视图间切换；拖拽面板可改变位置，默认不会移出浏览器视口。

如果面板位于一个固定容器内，可以指定拖拽边界：

const stats = new Stats({
  dragBounds: document.querySelector("#canvas-demo") as HTMLElement,
});

传入 draggable: false 可以关闭拖拽能力。

调试任意 Canvas 区域

CanvasDebugger 会在启用期间统计指定 DOM 区域内的 2D Canvas 绘制调用，并在销毁后恢复原始 Canvas API：

import { CanvasDebugger } from "@canvas-components/stats";

const host = document.querySelector("#canvas-demo");
if (host instanceof HTMLElement) {
  const canvasDebugger = new CanvasDebugger({ target: host });
  host.append(canvasDebugger.dom);

  // 不再调试时完整清理。
  canvasDebugger.destroy();
}