OffscreenCanvas在Worker中可用，但必须由主线程通过transferControlToOffscreen()创建并移交控制权，Worker内直接new会报TypeError: Illegal constructor；需验证typeof OffscreenCanvas !== 'undefined'且配合主线程canvas实例使用。
OffscreenCanvas 在 Worker 中不可用？先确认浏览器支持
Chrome 69+、Edge 79+ 和 Firefox 110+ 支持 OffscreenCanvas，但仅限于 Worker 环境中通过 transferControlToOffscreen() 创建的实例——直接在 Worker 里 new OffscreenCanvas(width, height) 会报 TypeError: Illegal constructor。
常见错误现象：Uncaught TypeError: Illegal constructor 或 OffscreenCanvas is not defined。前者说明你试图在 Worker 里手动构造；后者说明目标浏览器不支持（比如 Safari 全系至今未实现）。
验证方式：在 Worker 内执行 typeof OffscreenCanvas !== 'undefined'，且必须配合主线程传入的 canvas 元素调用 transferControlToOffscreen() 后才能获得可用实例。
主线程如何正确传递 OffscreenCanvas 到 Worker
不能靠 postMessage(canvas) 直接传，必须用 transferControlToOffscreen() 获得控制权，再把返回值传给 Worker。
- 主线程需先有一个
元素（哪怕不插入 DOM），调用canvas.transferControlToOffscreen()得到OffscreenCanvas实例 - 该实例支持
postMessage(..., [offscreenCanvas])的 transferable 机制，Worker 接收后即可使用 - 注意：一旦 transfer，原
元素将无法再调用getContext('2d')或getContext('webgl')，否则报错SecurityError
示例关键片段：
const canvas = document.getElementById('myCanvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('render.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);
Worker 内使用 OffscreenCanvas 渲染时的上下文限制
OffscreenCanvas 不支持所有 HTMLCanvasElement 的方法，尤其缺失 DOM 相关 API（如 toDataURL、toBlob、getBoundingClientRect），且部分上下文能力受限。
-
getContext('2d')可用，但某些属性如canvas.width/canvas.height是只读的，修改无效 -
getContext('webgl')和getContext('webgl2')可用，但必须在 Worker 内初始化，且不能访问document或window - 没有
requestAnimationFrame，需用setInterval或setTimeout控制帧率，或由主线程通过postMessage驱动 - 图像解码（如
createImageBitmap）可在 Worker 中完成，但需显式传入transferable图像数据
渲染结果如何同步回主线程显示
OffscreenCanvas 本身不自动显示，必须手动把内容“画回”主线程的可见 canvas —— 通常用 transferToImageBitmap() + drawImage() 组合。
- Worker 中每帧调用
offscreen.transferToImageBitmap()，得到ImageBitmap（可 transferable） - 主线程接收后，用
ctx.drawImage(imageBitmap, ...)绘制到可见 canvas 上 - 注意：频繁调用
transferToImageBitmap()有内存和性能开销，建议控制帧率（如 30fps）并复用ImageBitmap（但不可复用，每次都是新对象） - 若追求更高性能，可考虑 WebGL 渲染后用
readPixels+createImageBitmap，但路径更长、兼容性更低
容易被忽略的一点：主线程绘制时，ImageBitmap 的 lifetime 由接收方管理，若未及时 drawImage 就丢弃引用，可能导致 Worker 渲染帧被丢弃而无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
