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
# dom-canvasgradient-addcolorstop-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
addColorStop

Legend

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

Full support
Full support

Siehe auch