Přechody HTML plátna
Plátno - Přechody
Přechody lze použít k vyplnění obdélníků, kruhů, čar, textu atd. Tvary na plátně nejsou omezeny na plné barvy.
Existují dva různé typy přechodů:
- createLinearGradient( x,y,x1,y1 ) - vytvoří lineární přechod
- createRadialGradient( x,y,r,x1,y1,r1 ) - vytvoří radiální/kruhový gradient
Jakmile máme objekt s přechodem, musíme přidat dvě nebo více barevných zarážek.
Metoda addColorStop() určuje zarážky barev a jejich polohu podél přechodu. Pozice přechodu mohou být kdekoli mezi 0 až 1.
Chcete-li použít přechod, nastavte vlastnost fillStyle nebo strokeStyle na přechod a poté nakreslete tvar (obdélník, text nebo čáru).
Použití createLinearGradient()
Příklad
Vytvořte lineární přechod. Vyplňte obdélník přechodem:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Pomocí createRadialGradient():
Příklad
Vytvořte radiální/kruhový přechod. Vyplňte obdélník přechodem:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);