Płótno HTML Metoda addColorStop()
Przykład
Zdefiniuj gradient przechodzący od czerni do bieli, jako styl wypełnienia prostokąta:
JavaScript:
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | Yes | 9.0 | Yes | Yes | Yes |
Definicja i użycie
Metoda addColorStop() określa kolory i położenie w obiekcie gradientu.
Metoda addColorStop() jest używana razem z createLinearGradient() lub createRadialGradient() .
Uwaga: Metodę addColorStop() można wywołać wielokrotnie, aby zmienić gradient. Jeśli pominiesz tę metodę dla obiektów gradientowych, gradient nie będzie widoczny. Musisz utworzyć co najmniej jeden punkt przejścia koloru, aby mieć widoczny gradient.
| Składnia JavaScript: | gradient .addColorStop( stop , kolor ); |
|---|
Wartości parametrów
| Parameter | Description | Play it |
|---|---|---|
| stop | A value between 0.0 and 1.0 that represents the position between start and end in a gradient | |
| color | A CSS color value to display at the stop position |
Więcej przykładów
Przykład
Zdefiniuj gradient za pomocą wielu metod addColorStop():
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop("0.3", "magenta");
grd.addColorStop("0.5", "blue");
grd.addColorStop("0.6", "green");
grd.addColorStop("0.8", "yellow");
grd.addColorStop(1, "red");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
❮ Odniesienie do płótna HTML