能否在Worker中不依赖Document创建Canvas以实现合成操作？

当然可以！其实你要的正是Worker环境专门支持的OffscreenCanvas，完全不需要依赖DOM里的Document或者Canvas元素。

你提到的new Canvas()在Worker里行不通，因为DOM中的<canvas>元素是绑定到文档树的，而Worker线程没有DOM环境，无法直接创建这类元素。但OffscreenCanvas就是为后台渲染、合成场景设计的，它完全独立于DOM，能直接在Worker中实例化：

// 在Worker线程内直接创建
const myOffscreenCanvas = new OffscreenCanvas(800, 600);
const ctx = myOffscreenCanvas.getContext('2d');

用它做合成操作非常方便，你可以创建多个OffscreenCanvas实例分别处理不同图层，然后把它们的内容绘制到同一个主画布上完成合成。举个简单的例子：

// 创建两个用于分层的OffscreenCanvas
const layer1 = new OffscreenCanvas(800, 600);
const layer1Ctx = layer1.getContext('2d');
layer1Ctx.fillStyle = 'rgba(255,0,0,0.5)';
layer1Ctx.fillRect(0, 0, 800, 600);

const layer2 = new OffscreenCanvas(800, 600);
const layer2Ctx = layer2.getContext('2d');
layer2Ctx.fillStyle = 'rgba(0,255,0,0.5)';
layer2Ctx.fillRect(200, 200, 400, 400);

// 合成到主画布
const mainCanvas = new OffscreenCanvas(800, 600);
const mainCtx = mainCanvas.getContext('2d');
mainCtx.drawImage(layer1, 0, 0);
mainCtx.drawImage(layer2, 0, 0);

如果需要把合成后的结果传回主线程，你可以用transferToImageBitmap()方法生成可转移的图像对象，或者直接传递OffscreenCanvas实例（注意要使用转移列表避免复制开销）：

const resultBitmap = mainCanvas.transferToImageBitmap();
self.postMessage({ result: resultBitmap }, [resultBitmap]);

这样既满足了你多画布合成的需求，又完全脱离了DOM的限制，完美适配Worker的后台运行场景。

内容来源于stack exchange