Canvas 与 SVG 深入：选型、渲染循环与离屏优化

<!-- viewBox 定义用户坐标系；容器多大多小，内部坐标不变 -->
<svg
  viewBox="0 0 400 300"
  preserveAspectRatio="xMidYMid meet"
  role="img"
  aria-label="季度收益示意"
  class="chart"
>
  <rect x="10" y="220" width="40" height="60" rx="4" />
  <rect x="70" y="180" width="40" height="100" rx="4" />
  <!-- CSS 控制显示尺寸，内部坐标不受影响 -->
</svg>

/* 响应式：宽随容器，高按 viewBox 比例自动得出 */
.chart {
  display: block;
  width: 100%;
  height: auto;
}

const canvas = document.querySelector<HTMLCanvasElement>('.board')!;
const ctx = canvas.getContext('2d')!;

let dirty = true;                  // 脏标记：有变化才重画
let rafId = 0;

function invalidate(): void {
  dirty = true;                    // 外部改动状态时调用，不直接画
}

function frame(now: number): void {
  rafId = requestAnimationFrame(frame);
  if (!dirty) return;              // 静止时跳过绘制，只消耗一个回调
  dirty = false;
  draw(now);
}

function draw(now: number): void {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const shape of shapes) shape.render(ctx, now);
}

rafId = requestAnimationFrame(frame);

// 页面隐藏时暂停循环：后台标签页 rAF 会被节流，但循环还在空转
document.addEventListener('visibilitychange', () => {
  if (document.hidden) cancelAnimationFrame(rafId);
  else { dirty = true; rafId = requestAnimationFrame(frame); }
});

/* 反例：每个图形一对 save/restore，栈最深到 N 层 */
for (const dot of dots) {
  ctx.save();
  ctx.fillStyle = dot.color;
  ctx.translate(dot.x, dot.y);
  ctx.beginPath();
  ctx.arc(0, 0, dot.r, 0, Math.PI * 2);
  ctx.fill();
  ctx.restore();
}

/* 正例：把变换吸收进绘制参数，样式按组设置，一次管一批 */
for (const color of colors) {
  ctx.fillStyle = color;
  ctx.beginPath();
  for (const dot of dotsOf(color)) {
    ctx.moveTo(dot.x + dot.r, dot.y);
    ctx.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2);
  }
  ctx.fill();                       // 同色批量填充，状态切换最少
}

<div class="stage">
  <canvas class="layer layer-static" aria-label="画板背景"></canvas>
  <canvas class="layer layer-dynamic" aria-hidden="true"></canvas>
</div>

.stage { position: relative; width: 100%; height: 320px; }
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.layer-static { z-index: 1; }
.layer-dynamic { z-index: 2; }

// 静态层：内容变化时才调用 repaintStatic（例如设置网格密度）
function repaintStatic(): void {
  drawGrid(staticCtx);
  staticDirty = false;
}

// 动态层：每帧清空重画，只放光标、选框、少量运动元素
function drawDynamic(now: number): void {
  dynamicCtx.clearRect(0, 0, w, h);
  drawCursor(dynamicCtx);
  drawSelection(dynamicCtx);
}

// 主线程：一次性移交控制权，之后 DOM canvas 只负责显示
const canvas = document.querySelector<HTMLCanvasElement>('.board')!;
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker(new URL('./render.worker.ts', import.meta.url), { type: 'module' });

worker.postMessage(
  { type: 'init', canvas: offscreen, width, height, dpr },
  [offscreen]                      // transferable：控制权转移，不可再访问
);

worker.postMessage({ type: 'add', points });   // 之后只传数据命令

// render.worker.ts：在 Worker 里拿到 2d context，循环绘制
let ctx: OffscreenCanvasRenderingContext2D | null = null;

self.onmessage = (event: MessageEvent) => {
  const data = event.data;
  if (data.type === 'init') {
    ctx = data.canvas.getContext('2d');
    loop();
  }
};

function loop(): void {
  if (!ctx) return;
  requestAnimationFrame(() => loop());   // Worker 里也有 rAF（仅 OffscreenCanvas 场景）
  drawFrame(ctx);
}

function fitCanvas(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): void {
  const dpr = Math.min(window.devicePixelRatio || 1, 2);   // 封顶 2：3 倍屏按 2 画，视觉差异小、成本减半
  const rect = canvas.getBoundingClientRect();              // CSS 尺寸
  canvas.width = Math.round(rect.width * dpr);
  canvas.height = Math.round(rect.height * dpr);
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);                  // 之后全部按 CSS 像素坐标绘制
}

// 推荐：toBlob 异步生成 Blob，不用 base64 膨胀内存，可直接下载或上传
canvas.toBlob((blob) => {
  if (!blob) return;
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'board.png';
  a.click();
  URL.revokeObjectURL(url);        // 用完立刻释放
}, 'image/png');
// JPEG 加质量参数：'image/jpeg', 0.85；带透明通道必须用 PNG 或 WebP

const img = new Image();
img.crossOrigin = 'anonymous';      // 前提：图片服务器返回允许的 CORS 响应头
img.src = '/cdn-cors-example/photo.png';
// 若图片服务不允许 CORS，crossOrigin 反而会直接加载失败——
// 这时要走服务端代理同源化，而不是去掉 crossOrigin 硬画（画上去就把画布污染了）