https://infinitecanvas.cc/reference/vello
使用 OffscreenCanvas + Worker 解耦主线程:
// 将 Vello 渲染移到 Worker
// worker.js
self.onmessage = async (e) => {
const { imageBuffer, width, height } = e.data;
// WASM 渲染
const bitmap = await self.velloRenderer.render(imageBuffer);
// 返回 ImageBitmap(零拷贝)
self.postMessage({ bitmap }, [bitmap]);
};
// 主线程
worker.postMessage({ imageBuffer: sharedArrayBuffer }, [sharedArrayBuffer]);
worker.onmessage = (e) => {
ctx.transferFromImageBitmap(e.data.bitmap); // 极快的 GPU 合成
};
https://infinitecanvas.cc/reference/vello
使用 OffscreenCanvas + Worker 解耦主线程: