OffscreenCanvas

OffscreenCanvas()

OffscreenCanvas-Konstruktor. Erstellt ein neues OffscreenCanvas-Objekt.

OffscreenCanvas.height

Die Höhe der Offscreen-Leinwand.

OffscreenCanvas.width

Die Breite der Offscreen-Leinwand.

OffscreenCanvas.getContext()

Gibt einen Zeichenkontext für die Offscreen-Leinwand zurück oder null, wenn der Kontextbezeichner nicht unterstützt wird oder die Offscreen-Leinwand bereits auf einen anderen Kontextmodus eingestellt wurde.

OffscreenCanvas.convertToBlob()

Erstellt ein Blob-Objekt, das das im Canvas enthaltene Bild darstellt.

OffscreenCanvas.transferToImageBitmap()

Erstellt ein ImageBitmap-Objekt aus dem zuletzt gerenderten Bild des OffscreenCanvas. Siehe die Referenz für wichtige Hinweise zur Verwaltung dieses ImageBitmap.

Erbt Ereignisse von seinem Elternteil, EventTarget.

Hören Sie auf diese Ereignisse mit addEventListener() oder indem Sie einen Ereignis-Listener an die oneventname-Eigenschaft dieses Interfaces zuweisen.

contextlost

Wird ausgelöst, wenn der Browser erkennt, dass ein OffscreenCanvasRenderingContext2D-Kontext verloren gegangen ist.

contextrestored

Wird ausgelöst, wenn der Browser einen OffscreenCanvasRenderingContext2D-Kontext erfolgreich wiederherstellt.

Eine Möglichkeit, die OffscreenCanvas-API zu verwenden, besteht darin, einen Rendering-Kontext zu verwenden, der von einem OffscreenCanvas-Objekt abgerufen wurde, um neue Frames zu erzeugen. Sobald ein neuer Frame in diesem Kontext fertig gerendert wurde, kann die Methode transferToImageBitmap() aufgerufen werden, um das zuletzt gerenderte Bild zu speichern. Diese Methode gibt ein ImageBitmap-Objekt zurück, das in verschiedenen Web-APIs und auch in einer zweiten Leinwand ohne Erstellung einer Transferkopie verwendet werden kann.

Um das ImageBitmap anzuzeigen, können Sie einen ImageBitmapRenderingContext-Kontext verwenden, der durch Aufrufen von canvas.getContext("bitmaprenderer") auf einem (sichtbaren) Canvas-Element erstellt werden kann. Dieser Kontext bietet nur die Möglichkeit, den Inhalt der Leinwand mit dem angegebenen ImageBitmap zu ersetzen. Ein Aufruf von ImageBitmapRenderingContext.transferFromImageBitmap() mit dem zuvor gerenderten und gespeicherten ImageBitmap vom OffscreenCanvas zeigt das ImageBitmap auf der Leinwand an und überträgt dessen Eigentum an die Leinwand. Ein einziges OffscreenCanvas kann Frames in eine beliebige Anzahl anderer ImageBitmapRenderingContext-Objekte übertragen.

Gegeben diese zwei <canvas>-Elemente

<canvas id="one"></canvas> <canvas id="two"></canvas>

wird der folgende Code das Rendering mit OffscreenCanvas wie oben beschrieben bereitstellen.

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);

Eine andere Möglichkeit, die OffscreenCanvas-API zu verwenden, besteht darin, transferControlToOffscreen() auf einem <canvas>-Element aufzurufen, entweder in einem Worker oder im Hauptthread, was ein OffscreenCanvas-Objekt von einem HTMLCanvasElement-Objekt aus dem Hauptthread zurückgibt. Ein Aufruf von getContext() wird dann einen Rendering-Kontext von diesem OffscreenCanvas abrufen.

Das main.js-Skript (Hauptthread) könnte so aussehen:

const htmlCanvas = document.getElementById("canvas");
const offscreen = htmlCanvas.transferControlToOffscreen();

const worker = new Worker("offscreen-canvas.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);

Während das offscreen-canvas.js-Skript (Worker-Thread) so aussehen kann:

onmessage = (evt) => {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");
  // Perform some drawing using the gl context
};

Es ist auch möglich, requestAnimationFrame() in Workern zu verwenden:

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);
};

Ein vollständiges Beispiel sehen Sie im OffscreenCanvas-Beispielquellcode auf GitHub oder führen Sie das OffscreenCanvas-Beispiel live aus.

• CanvasRenderingContext2D
• OffscreenCanvasRenderingContext2D
• ImageBitmap
• ImageBitmapRenderingContext
• HTMLCanvasElement.transferControlToOffscreen()
• requestAnimationFrame()
• WebGL Off the Main Thread – Mozilla Hacks (2016)