Vissza canvas témakörökhöz

Canvas shadow() elmosódottság / árnyék


A szkriptben meghatározhatók, színek, stílusok és árnyék.

PropertyDescription
fillStyleMeghatározza rajz kitöltéséhez használt színt, vagy színátmenetét.
fillStyle = "rgb(0, 160, 230)" - Alakzat kitöltési háttérszíne.
fillStyle = "rgba(0, 160, 230, 0.75)"; - Alakzat kitöltési háttérszíne, és átláthatósága.
fillStyle = "red"; Kitöltési szín.
fillStyle = "#f00"; Kitöltési szín.
strokeStyleMeghatározza rajz vonalának színét, vagy színátmenetét.
strokeStyle="rgb" vagy "rgba" vagy strokeStyle="red"; vagy strokeStyle="#f00";
shadowColorMeghatározza az árnyékokhoz használt színt. ( Alapértelmezett : # 000000 )
shadowBlurBeállítja árnyék elmosódottságának méretét, alakzat körül.
( Értéke: Csak pozitív lehet. )
shadowOffsetXBeállítja árnyék vízszintes elmozdítási értékét, az alakzatnál.
( Értéke: Pozitívnál jobbra, negatívnál balra mozgat. )
shadowOffsetYBeállítja árnyék függőleges elmozdítási értékét, az alakzatnál.
( Értéke: Pozitívnál lefelé, negatívnál felfelé mozgat. )



shadowBlur és shadowColor tulajdonság.

Konturvonalas piros négyszög, fekete árnyékkal:
var id = document.getElementById("shadow0");
var crajz = id.getContext("2d");

crajz.shadowBlur = 20;              // Elmosódottság szélessége, alakzat körül.
crajz.shadowColor = "black";    // Elmosódottság színe, alakzat körül.

crajz.lineWidth = 5;
crajz.strokeStyle = "#ccc";      // Meghatározhatunk más színt is. Pl.: "red".
crajz.strokeRect(40, 40, 100, 80);
Telített piros négyszög, fekete árnyékkal:
var c = document.getElementById("shadow");
var ctx = c.getContext("2d");
ctx.shadowBlur = 20;              // Elmosódottság szélessége, alakzat körül.
ctx.shadowColor = "black";    // Elmosódottság színe, alakzat körül.

ctx.fillStyle = "#ccc";        // Meghatározhatunk más színt is. Pl.: "red".
ctx.fillRect(40, 40, 100, 80);



Árnyék, elmosódottság mozgatása
shadowOffsetY és shadowOffsetX tulajdonságokkal.

Árnyékot, 20 képponttal helyezzük a téglalap felső pozíciója alá:

var id = document.getElementById("shadowOffsetY1");
var crajz = id.getContext("2d");

crajz.shadowBlur = 20;
crajz.shadowOffsetY = 20;
crajz.shadowColor = "black";

crajz.fillStyle = "red";
crajz.fillRect(40, 40, 100, 80);
Árnyék fentre.
shadowOffsetY = -20;
Árnyék jobbra.
shadowOffsetX = 20;
Árnyék balra.
shadowOffsetX = -20;
Árnyék fel és balra.
shadowOffsetY = -20;
shadowOffsetX = -20;