CanvasRenderingContext2D: getContextAttributes() Methode

Keine.

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

alpha Optional

Ein Boolescher Wert, der angibt, ob das Canvas 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: bezeichnet den sRGB-Farbraum
• display-p3: bezeichnet den display-p3 Farbraum

colorType Optional

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

• "unorm8" bezeichnet die Farbspeicherkanäle mit 8-Bit-Unsigned-Werten. Dies ist der Standardwert.
• "float16" bezeichnet die Farbspeicherkanäle mit 16-Bit-Floating-Point-Werten.

desynchronized Optional

Ein Boolescher Wert, der angibt, dass der Benutzeragent die Latenz reduziert hat, indem der Malzyklus des Canvas vom Ereignisloop desynchronisiert wurde.

willReadFrequently Optional

Ein Boolescher Wert, der angibt, ob dieses Canvas Softwarebeschleunigung (anstatt Hardwarebeschleunigung) verwendet, um häufige Rückleseoperationen über getImageData() zu unterstützen.

Dieses Beispiel zeigt, wie Sie Kontexattribute festlegen können, wenn Sie einen Canvas-Kontext erstellen, und dann getContextAttributes() aufrufen, um die tatsächlichen Parameter auszulesen, 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(), indem wir nur ein Kontexattribut spezifizieren.

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 verwendeten 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()