HTML tuvali addColorStop() Yöntemi
Örnek
Dikdörtgenin dolgu stili olarak siyahtan beyaza giden bir degrade 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);
Tarayıcı Desteği
Tablodaki sayılar, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | Yes | 9.0 | Yes | Yes | Yes |
Tanım ve Kullanım
addColorStop() yöntemi, bir degrade nesnesindeki renkleri ve konumu belirtir.
addColorStop() yöntemi, createLinearGradient() veya createRadialGradient() ile birlikte kullanılır .
Not: Bir degradeyi değiştirmek için addColorStop() yöntemini birden çok kez çağırabilirsiniz. Degrade nesneler için bu yöntemi atlarsanız, degrade görünmez. Görünür bir degradeye sahip olmak için en az bir renk durağı oluşturmanız gerekir.
| JavaScript sözdizimi: | degrade .addColorStop( dur , renk ); |
|---|
Parametre Değerleri
| 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 |
Daha fazla örnek
Örnek
Birden çok addColorStop() yöntemiyle bir degrade 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("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 Kanvas Referansı