Vissza canvas témakörökhöz

Canvas Gradient színátmenet.

Grádient fokozat nélküli egyenes és körkörös színátmenet.

Method / MódszerLeírás
createLinearGradient()Egyenes színátmenetet hoz létre. (A canvas rajzvászon tartalmához használható.)
// Gradient, azaz, színátmenet létrehozása, ( grd ) változóhoz rendeléssel.
var grd = crajz.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
createPattern()Megismétli megadott elemet, a megadott mintával.
createRadialGradient()Sugárirányú / köríves színátmenetet hoz létre. (A canvas rajzvászon tartalmához használható.)
// Gradient, azaz, színátmenet létrehozása, ( grd ) változóhoz rendeléssel.
var grd = crajz.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
addColorStop()Megadja stop pozíciót és színt, egy gradiens objektumban.
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");


A színátmenetet alakzatok és szöveg karaktereinek kitöltéséhez használhatjuk.
Használható a strokeStyle vagy fillStyle tulajdonságok értékeként.
Az addColorStop () metódus segítségével adja meg a különböző színeket, és hól helyezze el a színt, a gradiens objektumban.

Szintaxisa: createLinearGradient ( x0, y0, x1, y1 );

ParamétereiLeírás
x0A gradient színátmenet kezdőpontjának x koordinátája.
y0A gradient színátmenet kezdőpontjának y koordinátája.
x1A gradient színátmenet végpontjának x koordinátája.
y1A gradient színátmenet végpontjának y koordinátája.


createLinearGradient példák

Egyenes színátmenetet létrehozhatunk vízszintesen és függőlegesen, vagy ezek kombinációiból.
Egyenes színátmenet meghatározása, melyet tetszőleges elnevezésű változóhoz rendelünk.
Majd ezen változó határozza meg, a rajzolt alakzat színének stílusát.

Vízszintes, egyenesvonalú színátmenet. 
<canvas id="cLG" width="300" height="100" style="border:2px solid lime"></canvas>
<script>
var id = document.getElementById("cLG");
var crajz = id.getContext("2d");

// Vízszintes színátmenet létrehozása, ( grd ) változóhoz  rendeléssel.
var grd = crajz.createLinearGradient(0, 0, 320, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

Előre meghatározott színátmenettel, alakzat rajzolása
crajz.fillStyle = grd;
crajz.fillRect(0,0, 300, 100); 
</script>

A LinearGradient szélességének változtatása. 
createLinearGradient(0, 0, 40, 0);
fillRect(0,0, 160, 100); 

createLinearGradient(0, 0, 80, 0);
fillRect(0,0, 160, 100); 

createLinearGradient(0, 0, 120, 0);
fillRect(0,0, 160, 100); 

createLinearGradient(0, 0, 160, 0);
fillRect(0,0, 160, 100);
Fekete - piros - sárga, színekkel. 
var id = document.getElementById("atmenetfpf");
var crajz = id.getContext("2d");
// Egyenes színátmenet létrehozása, és " tgrd "  nevű, változóhoz rendelése.
var tgrd = crajz.createLinearGradient(0, 0, 170, 0);
tgrd.addColorStop(0, "black");
tgrd.addColorStop(0.5 ,"red");
tgrd.addColorStop(1, "yellow");
// Előre meghatározott, egyenes színátmenettel, alakzat rajzolása
crajz.fillStyle = tgrd;
crajz.fillRect(20, 20, 150, 100);




Függőleges, egyenesvonalú színátmenet. 
<canvas id="cLGf" width="100" height="220" style="border:2px solid lime"></canvas>
<script>
var id = document.getElementById("cLGf");
var crajz = id.getContext("2d");

// Vízszintes színátmenet létrehozása, ( grd ) változóhoz  rendeléssel.
var grd = crajz.createLinearGradient(0, 0, 0, 300);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

Előre meghatározott színátmenettel, alakzat rajzolása
crajz.fillStyle = grd;
crajz.fillRect(0,0, 100, 220); 
</script>


A LinearGradient függőleges változtatása. 
createLinearGradient(0, 0,  0,40);
fillRect(0,0, 100, 160); 

createLinearGradient(0, 0,  0,80);
fillRect(0,0, 100, 160); 

createLinearGradient(0, 0,  0,120);
fillRect(0,0, 100, 160); 

createLinearGradient(0, 0,  0,160);
fillRect(0,0, 100, 160);



Balról - jobbra, fekete-fehér színekkel: 
var id = document.getElementById("atmenetbj");
var crajz = id.getContext("2d");
// Egyenes színátmenet létrehozása, és " grd "  nevű, változóhoz rendelése.
var grd = crajz.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
// Előre meghatározott, egyenes színátmenettel, alakzat rajzolása
crajz.fillStyle = grd;
crajz.fillRect(20, 20, 150, 100);
Felülről - lefelé, fekete-fehér színekkel: 
var id = document.getElementById("atmenetfl");
var crajz = id.getContext("2d");
// Egyenes színátmenet létrehozása, és " Fgrd "  nevű, változóhoz rendelése.
var Fgrd = crajz.createLinearGradient(0, 0, 0, 170);
Fgrd.addColorStop(0, "black");
Fgrd.addColorStop(1, "white");
// Előre meghatározott, egyenes színátmenettel, alakzat rajzolása
crajz.fillStyle = Fgrd;
crajz.fillRect(20, 20, 150, 100);


Körkörös színátmenet createRadialGradient()

A createRadialGradient () metódus radiális / köríves gradiens objektumot hoz létre.
A színátmenetet alakzatok, és szöveg kitöltéséhez használhatjuk.
Ezt az objektumot használjuk a strokeStyle vagy fillStyle tulajdonságok értékeként.
Az addColorStop () metódus segítségével adjuk meg, a különböző színeket, és hól helyezze el a színt a gradiens objektumban.

Szintaxisa: createRadialGradient ( bx, by, br, kx, ky, kr );

ParamétereiLeírás
bxA gradient színátmenet kezdő, azaz, belső körének x-koordinátája.
byA gradient színátmenet kezdõ, azaz, belső körének y-koordinátája..
brA gradient színátmenet kezdő, azaz, belső kör sugara.
kxA gradient színátmenet végző, azaz, külső körének x-koordinátája.
kyA gradient színátmenet végző, azaz, külső körének y-koordinátája.
krA gradient színátmenet végző, azaz, külső kör sugara.


Körkörös színátmenet. 
<canvas id="cRG" width="160" height="160" style="border:2px solid lime"></canvas>
<script>
var id = document.getElementById("cRG");
var crajz = id.getContext("2d");

// Körkörös színátmenet létrehozása, ( grd ) változóhoz  rendeléssel.
var grd = crajz.createRadialGradient(80, 80, 10, 80, 80, 80);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Előre meghatározott, körkörös színátmenettel, alakzat rajzolása
crajz.fillStyle = grd;
crajz.fillRect(0,0, 160, 160); // Szemléltetéshez, méret akkora legyen, melyben a gradient elfér.
</script>



createRadialGradient belső kör sugarának változtatása. 
createRadialGradient(80,80,2,   80,80,80);

createRadialGradient(80,80,20,   80,80,80);

createRadialGradient(80,80,40,   80,80,80);



A fenti createRadialGradient-ből, csak annyi látható, amennyi értéket meghatároztunk a fillRect(y,x,w,h) metódusnál. 
createRadialGradient(80,80,2,   80,80,80);
fillRect(0,0, 100, 80);

createRadialGradient(80,80,20,   80,80,80);
fillRect(20,30, 120, 80);

createRadialGradient(80,80,40,   80,80,80);
fillRect(20,30, 120, 80);



Három színnel (fekete-piros-sarga), körkörös színátmenet. 
<canvas id="cRG" width="160" height="160" style="border:2px solid lime"></canvas>
<script>
var id = document.getElementById("cRG");
var crajz = id.getContext("2d");

// Körkörös színátmenet létrehozása, ( grd ) változóhoz  rendeléssel.
var grd = crajz.createRadialGradient(80, 80, 10, 80, 80, 80);
grd.addColorStop(0, "black");
grd.addColorStop(0.5 ,"red");
grd.addColorStop(1, "yellow");

// Előre meghatározott, körkörös színátmenettel, alakzat rajzolása
crajz.fillStyle = grd;
crajz.fillRect(0,0, 160, 160); // Szemléltetési méret akkora, melyben a gradient elfér.
</script>



Rajz konturvonalához, egyenesvonalú színátmenetet alkalmazunk. 
var id = document.getElementById("kontur01");
var crajz = id.getContext("2d");

// Gradient, azaz, színátmenet létrehozása, ( grd ) változóhoz  rendeléssel.
var grd = crajz.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

Előre meghatározott, egyenes színátmenettel, alakzat rajzolása
   crajz.lineWidth = 5;    
   crajz.strokeStyle = grd;
   crajz.strokeRect(10, 10, 150, 80);