CanvasRenderingContext2D: Eigenschaft globalAlpha

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die CanvasRenderingContext2D.globalAlpha-Eigenschaft der Canvas 2D API gibt den Alpha- (Transparenz-) Wert an, der auf Formen und Bilder angewendet wird, bevor sie auf die Leinwand gezeichnet werden.

Hinweis: Siehe auch das Kapitel Stile und Farben anwenden im Canvas-Tutorial.

Wert

Eine Zahl zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig), inklusive. Der Standardwert ist 1.0. Werte außerhalb dieses Bereichs, einschließlich Infinity und NaN, werden nicht gesetzt, und globalAlpha behält seinen vorherigen Wert.

Beispiele

Zeichnen von durchscheinenden Formen

Dieses Beispiel verwendet die globalAlpha-Eigenschaft, um zwei halbtransparente Rechtecke zu zeichnen.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.globalAlpha = 0.5;

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

Ergebnis

Überlagerung transparenter Formen

Dieses Beispiel veranschaulicht den Effekt der Überlagerung mehrerer transparenter Formen übereinander. Wir beginnen mit dem Zeichnen eines soliden Hintergrunds, der aus vier unterschiedlich farbigen Quadraten besteht. Anschließend setzen wir die globalAlpha-Eigenschaft auf 0.2 (20% undurchsichtig); dieser Alphawert wird auf alle unsere transparenten Formen angewendet. Danach verwenden wir eine for-Schleife, um eine Reihe von Kreisen mit zunehmenden Radien zu zeichnen.

Mit jedem neuen Kreis wird die Opazität der darunterliegenden vorhergehenden Kreise effektiv erhöht. Wenn wir die Schrittanzahl erhöhen (und somit mehr Kreise zeichnen), würde der Hintergrund schließlich vollständig aus der Bildmitte verschwinden.

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Draw background
ctx.fillStyle = "#FD0";
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = "#6C0";
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = "#09F";
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = "#F30";
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = "#FFF";

// Set transparency value
ctx.globalAlpha = 0.2;

// Draw transparent circles
for (let i = 0; i < 7; i++) {
  ctx.beginPath();
  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
  ctx.fill();
}

Spezifikationen

Specification
HTML Standard
# dom-context-2d-globalalpha-dev

Browser-Kompatibilität

BCD tables only load in the browser

Gecko-spezifische Hinweise

  • Ab Gecko 5.0 wirft das Spezifizieren ungültiger Werte für globalAlpha keinen SYNTAX_ERR-Ausnahmefehler mehr; diese werden jetzt korrekt stillschweigend ignoriert.
  • In Browsern, die auf WebKit und Blink basieren, ist eine nicht standardisierte und veraltete Methode ctx.setAlpha() zusätzlich zu dieser Eigenschaft implementiert.

Siehe auch