如何在Web Worker中结合Offscreen Canvas使用matter.js？

下面是针对你遇到的三个问题的具体解决办法，亲测可行：

1. 解决window.requestAnimationFrame不存在的问题 #

matter.js内部依赖全局的requestAnimationFrame和window对象，Web Worker里没有这些，我们可以手动模拟：

// 在Web Worker开头添加
self.window = self;
self.requestAnimationFrame = (callback) => setTimeout(callback, 16); // 模拟60fps
self.cancelAnimationFrame = (id) => clearTimeout(id);

同时，不要使用matter.js自带的自动渲染循环（Matter.Render.run(renderer)），改为手动控制更新频率：

// 初始化后，用setInterval替代自动循环
setInterval(() => {
  Matter.Engine.update(engine, 16); // 固定每帧16ms
  Matter.Render.world(renderer);
}, 16);

2. 解决new Image()未定义的问题 #

Web Worker中无法使用普通Image构造函数，但支持OffscreenImage，直接全局替换即可：

// 在Web Worker开头添加
self.Image = OffscreenImage;

这样matter.js创建精灵时调用的new Image()会自动使用OffscreenImage，完全兼容原有逻辑。

3. 解决Offscreen Canvas不支持样式设置的问题 #

matter.js的渲染器会尝试设置画布的style属性，但Offscreen Canvas没有这个属性，需要修改matter.js源码：

1. 打开matter.js的源码（或minified版本找到对应片段）
2. 搜索canvas.style相关代码，一般在Renderer.setSize或Renderer.create方法里
3. 删除或注释掉类似以下的代码：

// 找到后删除
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

初始化时手动设置Offscreen Canvas的尺寸即可：

offscreenCanvas.width = 800;
offscreenCanvas.height = 600;

const renderer = Matter.Render.create({
  canvas: offscreenCanvas,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    // 其他配置
  }
});

完整示例代码 #

Web Worker文件（worker.js） #

// 全局模拟与替换
self.window = self;
self.requestAnimationFrame = (callback) => setTimeout(callback, 16);
self.cancelAnimationFrame = (id) => clearTimeout(id);
self.Image = OffscreenImage;

// 导入matter.js
importScripts('matter.min.js');

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

  // 设置画布尺寸
  offscreenCanvas.width = 800;
  offscreenCanvas.height = 600;

  // 初始化matter.js
  const engine = Matter.Engine.create();
  const renderer = Matter.Render.create({
    canvas: offscreenCanvas,
    engine: engine,
    options: {
      width: 800,
      height: 600,
      wireframes: false,
      background: '#f1f1f1'
    }
  });

  // 添加物理对象
  const box = Matter.Bodies.rectangle(400, 200, 80, 80);
  const ground = Matter.Bodies.rectangle(400, 570, 800, 60, { isStatic: true });
  Matter.World.add(engine.world, [box, ground]);

  // 手动循环更新
  setInterval(() => {
    Matter.Engine.update(engine, 16);
    ctx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
    Matter.Render.world(renderer);
  }, 16);
};

主线程文件（main.js） #

const canvas = document.getElementById('game-canvas');
const offscreenCanvas = canvas.transferControlToOffscreen();

const worker = new Worker('worker.js');
worker.postMessage({ canvas: offscreenCanvas }, [offscreenCanvas]);

内容的提问来源于stack exchange，提问作者omega