CanvasRenderingContext2D: Methode createLinearGradient()

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 Methode CanvasRenderingContext2D.createLinearGradient() der Canvas 2D API erstellt einen Farbverlauf entlang der Linie, die zwei gegebene Koordinaten verbindet.

Der Farbverlauf wechselt die Farben entlang der Verlaufslinie, beginnend bei Punkt x0, y0 und bis zu x1, y1, auch wenn diese Punkte die Verlaufslinie über die Ränder des Elements hinaus erweitern, auf dem der Farbverlauf gezeichnet wird.

Diese Methode gibt einen linearen CanvasGradient zurück. Um auf eine Form angewendet zu werden, muss der Farbverlauf zuerst den Eigenschaften fillStyle oder strokeStyle zugewiesen werden.

Hinweis: Farbverlaufskoordinaten sind global, d. h. relativ zum aktuellen Koordinatenraum. Wenn sie auf eine Form angewendet werden, sind die Koordinaten NICHT relativ zu den Koordinaten der Form.

Syntax

js
createLinearGradient(x0, y0, x1, y1)

Die Methode createLinearGradient() wird mit vier Parametern spezifiziert, die die Start- und Endpunkte der Verlaufslinie definieren.

Parameter

x0

Die x-Achsen-Koordinate des Startpunktes.

y0

Die y-Achsen-Koordinate des Startpunktes.

x1

Die x-Achsen-Koordinate des Endpunktes.

y1

Die y-Achsen-Koordinate des Endpunktes.

Rückgabewert

Ein linearer CanvasGradient, der mit der angegebenen Linie initialisiert wurde.

Ausnahmen

NotSupportedError DOMException

Wird ausgelöst, wenn nicht endliche Werte als Parameter übergeben werden.

Beispiele

Ein Rechteck mit einem linearen Farbverlauf füllen

Dieses Beispiel initialisiert einen linearen Farbverlauf mit der Methode createLinearGradient(). Drei Farbstopps zwischen den Start- und Endpunkten des Gradienten werden dann erstellt. Schließlich wird der Farbverlauf dem Canvas-Kontext zugewiesen und ein gefülltes Rechteck wird gerendert.

HTML

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

JavaScript

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

// Create a linear gradient
// The start gradient point is at x=20, y=0
// The end gradient point is at x=220, y=0
const gradient = ctx.createLinearGradient(20, 0, 220, 0);

// Add three color stops
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "cyan");
gradient.addColorStop(1, "green");

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);

Ergebnis

Spezifikationen

Specification
HTML
# dom-context-2d-createlineargradient-dev

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createLinearGradient

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch