CanvasGradient: addColorStop() Methode

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.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die CanvasGradient.addColorStop() Methode fügt einem gegebenen Canvas-Gradienten einen neuen Farbverlaufspunkt hinzu, der durch einen offset und eine color, definiert ist.

Syntax

js
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

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

JavaScript

js
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

Specification
HTML Standard
# dom-canvasgradient-addcolorstop-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch