OffscreenCanvas
Baseline 廣泛可用 *
注意：此功能在 Web Workers 中可用。
在使用 <canvas> 元素或 Canvas API 時，渲染、動畫和使用者互動通常發生在 Web 應用程式的主執行執行緒上。與 Canvas 動畫和渲染相關的計算可能會對應用程式效能產生重大影響。
OffscreenCanvas 介面提供了一個可以在螢幕外渲染的 Canvas，將 DOM 與 Canvas API 分解開，因此 <canvas> 元素不再完全依賴於 DOM。渲染操作也可以在 Worker 上下文中執行，這允許您在單獨的執行緒中執行某些任務，並避免在主執行緒上執行繁重的工作。
OffscreenCanvas 是一個 可轉移物件。
建構函式
OffscreenCanvas()-
OffscreenCanvas 建構函式。建立一個新的
OffscreenCanvas物件。
例項屬性
OffscreenCanvas.height-
離屏 Canvas 的高度。
OffscreenCanvas.width-
離屏 Canvas 的寬度。
例項方法
OffscreenCanvas.getContext()-
返回離屏 Canvas 的繪圖上下文，如果上下文識別符號不受支援，或者離屏 Canvas 已被設定為不同的上下文模式，則返回
null。 OffscreenCanvas.convertToBlob()-
建立一個表示 Canvas 中影像的
Blob物件。 OffscreenCanvas.transferToImageBitmap()-
從
OffscreenCanvas最近渲染的影像建立一個ImageBitmap物件。請參閱其參考文件，瞭解有關管理此ImageBitmap的重要注意事項。
事件
繼承其父級 EventTarget 的事件。
使用 addEventListener() 監聽這些事件，或透過將事件監聽器分配給此介面的 oneventname 屬性。
contextlost-
如果瀏覽器檢測到
OffscreenCanvasRenderingContext2D上下文丟失，則觸發此事件。 contextrestored-
如果瀏覽器成功恢復了
OffscreenCanvasRenderingContext2D上下文，則觸發此事件。
示例
同步顯示 OffscreenCanvas 生成的幀
使用 OffscreenCanvas API 的一種方法是使用從 OffscreenCanvas 物件獲得的渲染上下文來生成新幀。一旦在新幀在此上下文中完成渲染，就可以呼叫 transferToImageBitmap() 方法來儲存最近渲染的影像。此方法返回一個 ImageBitmap 物件，該物件可用於各種 Web API，也可在第二個 Canvas 中使用，而無需建立傳輸副本。
要顯示 ImageBitmap，可以使用 ImageBitmapRenderingContext 上下文，該上下文可以透過在（可見的）Canvas 元素上呼叫 canvas.getContext("bitmaprenderer") 來建立。此上下文僅提供將 Canvas 內容替換為給定 ImageBitmap 的功能。將之前渲染並儲存的 OffscreenCanvas 的 ImageBitmap 傳遞給 ImageBitmapRenderingContext.transferFromImageBitmap() 會將 ImageBitmap 顯示在 Canvas 上，並將其所有權轉移給 Canvas。單個 OffscreenCanvas 可以將幀傳輸到任意數量的其他 ImageBitmapRenderingContext 物件。
給定這兩個 <canvas> 元素
<canvas id="one"></canvas> <canvas id="two"></canvas>
以下程式碼將按照上述描述提供使用 OffscreenCanvas 的渲染。
const one = document.getElementById("one").getContext("bitmaprenderer");
const two = document.getElementById("two").getContext("bitmaprenderer");
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");
// Perform some drawing for the first canvas using the gl context
const bitmapOne = offscreen.transferToImageBitmap();
one.transferFromImageBitmap(bitmapOne);
// Perform some more drawing for the second canvas
const bitmapTwo = offscreen.transferToImageBitmap();
two.transferFromImageBitmap(bitmapTwo);
非同步顯示 OffscreenCanvas 生成的幀
使用 OffscreenCanvas API 的另一種方法是在 <canvas> 元素上呼叫 transferControlToOffscreen()，無論是在 Worker 還是主執行緒上，這將從主執行緒的 HTMLCanvasElement 物件返回一個 OffscreenCanvas 物件。然後呼叫 getContext() 將從該 OffscreenCanvas 獲取渲染上下文。
main.js 指令碼（主執行緒）可能如下所示
const htmlCanvas = document.getElementById("canvas");
const offscreen = htmlCanvas.transferControlToOffscreen();
const worker = new Worker("offscreen-canvas.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);
而 offscreen-canvas.js 指令碼（Worker 執行緒）可能如下所示
onmessage = (evt) => {
const canvas = evt.data.canvas;
const gl = canvas.getContext("webgl");
// Perform some drawing using the gl context
};
在 Worker 中使用 requestAnimationFrame() 也是可能的
onmessage = (evt) => {
const canvas = evt.data.canvas;
const gl = canvas.getContext("webgl");
function render(time) {
// Perform some drawing using the gl context
requestAnimationFrame(render);
}
requestAnimationFrame(render);
};
有關完整示例，請參閱 GitHub 上的 OffscreenCanvas 示例原始碼，或 即時執行 OffscreenCanvas 示例。
規範
| 規範 |
|---|
| HTML # the-offscreencanvas-interface |
瀏覽器相容性
載入中…