HTML5 Canvas API 离屏画布（Offscreen Canvas）

离屏画布（Offscreen Canvas）是 HTML5 Canvas API 的一种扩展，允许开发者将绘图操作在一个独立的画布中完成，而不是直接在主屏画布上进行操作。这种方法可以提升性能，尤其是在需要频繁重绘或动态更新的场景中。

以下是离屏画布使用方法的全面且结构化的讲解：

1. 什么是离屏画布

1.1 定义

离屏画布是指一个未直接附加到 DOM 的画布，它通过 JavaScript 操作，允许在内存中进行绘图。

1.2 主要用途

提高性能：减少对主线程的影响。
复杂绘图：绘制复杂内容后再合成到主画布。
离屏操作：在后台完成绘图操作，并在必要时快速呈现结果。
动画和动态效果：适合多帧动画生成。

2. 离屏画布的创建方法

2.1 使用 DOM 的 `<canvas>` 元素

可以通过 JavaScript 动态创建一个 <canvas> 元素，但不将其插入到 DOM 中。

const offscreenCanvas = document.createElement('canvas');
const offCtx = offscreenCanvas.getContext('2d');

// 设置画布大小
offscreenCanvas.width = 500;
offscreenCanvas.height = 500;

// 在离屏画布上绘制
offCtx.fillStyle = 'blue';
offCtx.fillRect(0, 0, 100, 100);

2.2 使用 `OffscreenCanvas` API

OffscreenCanvas 是一种专门的离屏画布 API，适用于现代浏览器，特别是在 Web Worker 中使用。

const offscreenCanvas = new OffscreenCanvas(500, 500);
const offCtx = offscreenCanvas.getContext('2d');

// 在离屏画布上绘制
offCtx.fillStyle = 'red';
offCtx.fillRect(0, 0, 100, 100);

3. 离屏画布的常见用途

3.1 提升重绘性能

在动画或频繁重绘的情况下，可以将静态内容绘制到离屏画布上，仅更新动态部分。

// 创建离屏画布
const offscreenCanvas = document.createElement('canvas');
const offCtx = offscreenCanvas.getContext('2d');
offscreenCanvas.width = 500;
offscreenCanvas.height = 500;

// 绘制静态内容到离屏画布
offCtx.fillStyle = 'lightgrey';
offCtx.fillRect(0, 0, 500, 500);

// 将离屏内容绘制到主画布
const canvas = document.getElementById('mainCanvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(offscreenCanvas, 0, 0);

3.2 动画生成

使用离屏画布生成动画帧，减少对主线程的阻塞。

const offscreenCanvas = new OffscreenCanvas(500, 500);
const offCtx = offscreenCanvas.getContext('2d');
const canvas = document.getElementById('mainCanvas');
const ctx = canvas.getContext('2d');

let angle = 0;

function drawFrame() {
  offCtx.clearRect(0, 0, 500, 500);

  // 绘制旋转矩形
  offCtx.save();
  offCtx.translate(250, 250);
  offCtx.rotate(angle);
  offCtx.fillStyle = 'blue';
  offCtx.fillRect(-50, -50, 100, 100);
  offCtx.restore();

  angle += 0.05;

  // 将离屏内容绘制到主画布
  ctx.clearRect(0, 0, 500, 500);
  ctx.drawImage(offscreenCanvas, 0, 0);

  requestAnimationFrame(drawFrame);
}

drawFrame();

3.3 在 Web Worker 中使用

使用 OffscreenCanvas 将绘图工作移至 Web Worker，避免主线程阻塞。

步骤 1：在主线程中创建画布并传递给 Worker

const canvas = document.getElementById('mainCanvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('worker.js');

// 将 OffscreenCanvas 传递给 Worker
worker.postMessage({ canvas: offscreen }, [offscreen]);

步骤 2：在 Worker 中处理绘图

self.onmessage = function (event) {
  const offscreenCanvas = event.data.canvas;
  const ctx = offscreenCanvas.getContext('2d');

  // 绘制内容
  ctx.fillStyle = 'red';
  ctx.fillRect(50, 50, 200, 200);
};

4. 优点与局限性

优点

性能提升：减少主线程的重绘压力。
更灵活的渲染：适合复杂的图形处理。
与 Worker 集成：可以并行处理任务。
分层绘图：使绘图逻辑更清晰。

局限性

浏览器支持限制：OffscreenCanvas 目前不完全支持所有浏览器（如 Safari）。
内存占用：离屏画布会增加内存消耗。
代码复杂性：需要额外管理离屏画布的状态和内容。

5. 使用注意事项

Canvas 大小：始终为离屏画布设置明确的宽高，否则可能导致渲染异常。
状态管理：在使用 save() 和 restore() 时注意恢复状态，以避免影响其他绘图操作。
兼容性检测：确保目标浏览器支持 OffscreenCanvas，可以使用 if ('OffscreenCanvas' in window) 检查。

6. 示例代码（完整应用）

以下是一个完整示例，展示如何使用离屏画布与主画布配合绘图：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offscreen Canvas Example</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="mainCanvas" width="500" height="500"></canvas>
  <script>
    // 创建离屏画布
    const offscreenCanvas = document.createElement('canvas');
    offscreenCanvas.width = 500;
    offscreenCanvas.height = 500;
    const offCtx = offscreenCanvas.getContext('2d');

    // 主画布
    const canvas = document.getElementById('mainCanvas');
    const ctx = canvas.getContext('2d');

    // 在离屏画布上绘制
    offCtx.fillStyle = 'green';
    offCtx.fillRect(0, 0, 200, 200);

    // 将离屏内容绘制到主画布
    ctx.drawImage(offscreenCanvas, 0, 0);
  </script>
</body>
</html>

7. 参考文档

MDN: Canvas API
MDN: OffscreenCanvas
MDN: CanvasRenderingContext2D
W3C: OffscreenCanvas Specification