CanvasGradient: addColorStop() Methode

Syntax

addColorStop(offset, color)

Parameter

offset

Eine Zahl zwischen 0 und 1, inklusiv, die die Position des Farbverlaufspunkts darstellt. 0 repräsentiert den Beginn des Gradienten und 1 das Ende.

color

Ein CSS <color> Wert, der die Farbe des Punktes darstellt.

Rückgabewert

Keiner (undefined).

Ausnahmen

IndexSizeError DOMException

Wird ausgelöst, wenn offset nicht zwischen 0 und 1 liegt (beide eingeschlossen).

SyntaxError DOMException

Wird ausgelöst, wenn color nicht als CSS <color> Wert geparst werden kann.

Beispiele

Hinzufügen von Punkten zu einem Gradient

Dieses Beispiel verwendet die Methode addColorStop, um Punkte zu einem linearen CanvasGradient Objekt hinzuzufügen. Der Gradient wird dann verwendet, um ein Rechteck zu füllen.

HTML

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

JavaScript

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

let gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(0.7, "white");
gradient.addColorStop(1, "pink");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Schnittstelle, die diese Methode definiert: CanvasGradient
• CanvasRenderingContext2D.createLinearGradient()
• CanvasRenderingContext2D.createRadialGradient()