OffscreenCanvas 如何在 Web Worker 中进行渲染？ - 面试题

OffscreenCanvas 是 HTML5 提供的一个功能，允许在 Web Worker 中进行 Canvas 渲染，从而将复杂的图形计算从主线程移到后台线程。

OffscreenCanvas 的核心概念

特点

可以在 Worker 中进行 Canvas 绘图操作
支持大部分 Canvas 2D API 和 WebGL API
通过 transferControlToOffscreen() 方法将 Canvas 控制权转移
适用于复杂的图形渲染和动画

基本使用

主线程设置

javascript
// 获取 Canvas 元素
const canvas = document.getElementById('myCanvas');

// 将 Canvas 控制权转移到 OffscreenCanvas
const offscreen = canvas.transferControlToOffscreen();

// 创建 Worker
const worker = new Worker('canvas-worker.js');

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

Worker 中渲染

javascript
// canvas-worker.js
self.onmessage = function(e) {
  const canvas = e.data.canvas;
  const ctx = canvas.getContext('2d');
  
  // 在 Worker 中进行绘图
  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 绘制图形
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 100, 100);
    
    // 继续动画
    requestAnimationFrame(render);
  }
  
  render();
};

实际应用场景

1. 复杂动画渲染

javascript
// 主线程
const canvas = document.getElementById('canvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('animation-worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

// animation-worker.js
self.onmessage = function(e) {
  const canvas = e.data.canvas;
  const ctx = canvas.getContext('2d');
  
  let particles = [];
  
  function initParticles() {
    for (let i = 0; i < 1000; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        vx: (Math.random() - 0.5) * 2,
        vy: (Math.random() - 0.5) * 2,
        size: Math.random() * 3 + 1
      });
    }
  }
  
  function updateParticles() {
    particles.forEach(p => {
      p.x += p.vx;
      p.y += p.vy;
      
      if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
      if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
    });
  }
  
  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    particles.forEach(p => {
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(100, 150, 255, 0.7)`;
      ctx.fill();
    });
    
    updateParticles();
    requestAnimationFrame(render);
  }
  
  initParticles();
  render();
};

2. 图像处理

javascript
// 主线程
const canvas = document.getElementById('canvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('image-worker.js');

// 加载图像
const img = new Image();
img.onload = function() {
  worker.postMessage({ 
    canvas: offscreen, 
    image: img 
  }, [offscreen]);
};
img.src = 'image.jpg';

// image-worker.js
self.onmessage = function(e) {
  const canvas = e.data.canvas;
  const ctx = canvas.getContext('2d');
  const img = e.data.image;
  
  // 设置 Canvas 大小
  canvas.width = img.width;
  canvas.height = img.height;
  
  // 绘制原始图像
  ctx.drawImage(img, 0, 0);
  
  // 获取图像数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  
  // 图像处理：灰度化
  for (let i = 0; i < data.length; i += 4) {
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg;     // R
    data[i + 1] = avg; // G
    data[i + 2] = avg; // B
  }
  
  // 放回处理后的图像
  ctx.putImageData(imageData, 0, 0);
};

3. WebGL 渲染

javascript
// 主线程
const canvas = document.getElementById('glCanvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('webgl-worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

// webgl-worker.js
self.onmessage = function(e) {
  const canvas = e.data.canvas;
  const gl = canvas.getContext('webgl');
  
  // WebGL 初始化代码
  const vertexShaderSource = `
    attribute vec4 aVertexPosition;
    void main() {
      gl_Position = aVertexPosition;
    }
  `;
  
  const fragmentShaderSource = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
  `;
  
  // 编译着色器
  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
  const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
  
  // 创建程序
  const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  
  // 渲染
  function render() {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    gl.useProgram(shaderProgram);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    
    requestAnimationFrame(render);
  }
  
  render();
};

function compileShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}

与主线程交互

动态调整 Canvas 大小

javascript
// 主线程
const canvas = document.getElementById('canvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('canvas-worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

// 监听窗口大小变化
window.addEventListener('resize', function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  worker.postMessage({ 
    type: 'resize', 
    width: canvas.width, 
    height: canvas.height 
  });
});

// canvas-worker.js
self.onmessage = function(e) {
  if (e.data.type === 'resize') {
    canvas.width = e.data.width;
    canvas.height = e.data.height;
  }
};

接收用户输入

javascript
// 主线程
const canvas = document.getElementById('canvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('canvas-worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

// 发送鼠标位置
canvas.addEventListener('mousemove', function(e) {
  const rect = canvas.getBoundingClientRect();
  worker.postMessage({
    type: 'mousemove',
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  });
});

// canvas-worker.js
let mouseX = 0, mouseY = 0;

self.onmessage = function(e) {
  if (e.data.type === 'mousemove') {
    mouseX = e.data.x;
    mouseY = e.data.y;
  }
};

注意事项

1. Canvas 控制权只能转移一次

javascript
// ❌ 错误：多次转移
const offscreen1 = canvas.transferControlToOffscreen();
const offscreen2 = canvas.transferControlToOffscreen(); // 报错

// ✅ 正确：只转移一次
const offscreen = canvas.transferControlToOffscreen();

2. OffscreenCanvas 不支持所有 Canvas API

javascript
// ❌ 不支持
canvas.toDataURL(); // 在 Worker 中不可用
canvas.toBlob();   // 在 Worker 中不可用

// ✅ 使用 ImageBitmap 代替
const bitmap = await createImageBitmap(canvas);

3. 浏览器兼容性

javascript
// 检查浏览器支持
if ('transferControlToOffscreen' in HTMLCanvasElement.prototype) {
  // 支持 OffscreenCanvas
} else {
  // 不支持，使用回退方案
}

性能优化

1. 批量绘制

javascript
// ❌ 频繁调用绘制方法
for (let i = 0; i < 1000; i++) {
  ctx.beginPath();
  ctx.arc(particles[i].x, particles[i].y, particles[i].size, 0, Math.PI * 2);
  ctx.fill();
}

// ✅ 批量绘制
ctx.beginPath();
for (let i = 0; i < 1000; i++) {
  ctx.moveTo(particles[i].x, particles[i].y);
  ctx.arc(particles[i].x, particles[i].y, particles[i].size, 0, Math.PI * 2);
}
ctx.fill();

2. 使用 ImageBitmap

javascript
// 加载图像为 ImageBitmap
const bitmap = await createImageBitmap(image);

// 在 Worker 中绘制
ctx.drawImage(bitmap, 0, 0);

3. 降低渲染频率

javascript
let lastRenderTime = 0;
const targetFPS = 30;
const frameInterval = 1000 / targetFPS;

function render(timestamp) {
  if (timestamp - lastRenderTime >= frameInterval) {
    // 执行渲染
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // ... 绘制代码
    
    lastRenderTime = timestamp;
  }
  
  requestAnimationFrame(render);
}

最佳实践

复杂渲染使用 OffscreenCanvas：将计算密集型图形渲染移到 Worker
合理控制渲染频率：避免不必要的重绘
批量处理：减少绘制调用次数
使用 ImageBitmap：提高图像加载和渲染性能
检查浏览器兼容性：提供回退方案
及时释放资源：使用完毕后清理资源