HTML-doek addColorStop() Metode
Voorbeeld
Definieer 'n gradiënt wat van swart na wit gaan, as die vulstyl vir die reghoek:
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);
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | Yes | 9.0 | Yes | Yes | Yes |
Definisie en gebruik
Die addColorStop() metode spesifiseer die kleure en posisie in 'n gradiënt voorwerp.
Die addColorStop()-metode word saam met createLinearGradient() of createRadialGradient() gebruik .
Let wel: Jy kan die addColorStop() metode verskeie kere bel om 'n gradiënt te verander. As jy hierdie metode vir gradiëntvoorwerpe weglaat, sal die gradiënt nie sigbaar wees nie. Jy moet ten minste een kleurstop skep om 'n sigbare gradiënt te hê.
| JavaScript-sintaksis: | gradiënt .addColorStop( stop , kleur ); |
|---|
Parameterwaardes
| 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 |
Meer voorbeelde
Voorbeeld
Definieer 'n gradiënt met verskeie addColorStop() metodes:
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);
❮ HTML-doekverwysing