CanvasRenderingContext2D: getContextAttributes()-Methode

Keine.

Ein CanvasRenderingContext2DSettings-Objekt, das die tatsächlichen Kontextparameter enthält. Es hat folgende Mitglieder:

alpha Optional

Ein boolescher Wert, der angibt, ob die Leinwand einen Alphakanal enthält. Wenn false, ist der Hintergrund immer undurchsichtig, was das Zeichnen von transparenten Inhalten und Bildern beschleunigen kann.

colorSpace Optional

Gibt den Farbraum des Rendering-Kontexts an. Mögliche Werte sind:

• srgb: steht für den sRGB-Farbraum
• display-p3: steht für den display-p3-Farbraum

desynchronized Optional

Ein boolescher Wert, der angibt, ob der User-Agent die Latenzzeit reduziert hat, indem er den Malzyklus der Leinwand von der Ereignisschleife desynchronisiert hat.

willReadFrequently Optional

Ein boolescher Wert, der angibt, ob diese Leinwand Software-Beschleunigung (anstelle von Hardware-Beschleunigung) verwendet, um häufige Rückleseoperationen über getImageData() zu unterstützen.

Dieses Beispiel zeigt, wie Sie Kontextattribute beim Erstellen eines Leinwandkontexts angeben und anschließend getContextAttributes() aufrufen können, um die tatsächlichen Parameter zu lesen, die der Browser verwendet hat.

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += text;
}

Zuerst erstellen wir einen Kontext mit HTMLCanvasElement.getContext(), wobei wir nur ein Kontextattribut angeben.

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d", { alpha: false });

Wenn die getContextAttributes()-Methode unterstützt wird, verwenden wir sie, um die tatsächlichen vom Browser genutzten Attribute auszulesen (einschließlich derjenigen, die wir explizit angegeben haben):

if (ctx.getContextAttributes) {
  const attributes = ctx.getContextAttributes();
  log(JSON.stringify(attributes));
} else {
  log("CanvasRenderingContext2D.getContextAttributes() is not supported");
}

Abhängig von den vom Browser unterstützten Attributen sollte das untenstehende Protokoll eine Zeichenkette anzeigen, die in etwa so aussieht: {alpha: false, colorSpace: 'srgb', desynchronized: false, willReadFrequently: false}

• HTMLCanvasElement.getContext()
• WebGLRenderingContext.getContextAttributes()