Örnek
dikdörtgen için dolgu tarzı olarak, siyahtan beyaza giden bir gradyan tanımlayın:
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); Kendin dene " Tarayıcı Desteği
Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtin.
| Yöntem | |||||
|---|---|---|---|---|---|
| addColorStop() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Tanımı ve Kullanımı
addColorStop() yöntemi, bir gradyan nesnedeki renkleri ve konumunu belirler.
addColorStop() metodu ile birlikte kullanılır createLinearGradient() ya da createRadialGradient() .
Note: Sen diyebilirsin addColorStop() bir eğim değiştirmeye yöntemini birden çok kez. Eğer degrade nesneler için bu yöntemi atlarsanız, gradyan görünür olmayacaktır. Bir görünür değişim derecelerine sahip en az bir renk durağı oluşturmanız gerekir.
| JavaScript sözdizimi: | gradient . addColorStop( stop , color ) ; |
|---|
Parametre Değerleri
| Parametre | Açıklama | Oynat |
|---|---|---|
| stop | gradyanıyla başı ve sonu arasındaki konumunu temsil eden 0.0 ile 1.0 arasında bir değer | Oynat " |
| color | Bir CSS renk değeri en gösterilecek stop pozisyonuna | Oynat " |
Diğer Örnekler
Örnek
Birden fazla olan bir gradyan tanımlama addColorStop() şekli:
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);
Kendin dene "