Canvas shadow() elmosódottság / árnyék
A szkriptben meghatározhatók, színek, stílusok és árnyék.
| Property | Description |
|---|---|
| fillStyle | Meghatá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. |
| strokeStyle | Meghatározza rajz vonalának színét, vagy színátmenetét. strokeStyle="rgb" vagy "rgba" vagy strokeStyle="red"; vagy strokeStyle="#f00"; |
| shadowColor | Meghatározza az árnyékokhoz használt színt. ( Alapértelmezett : # 000000 ) |
| shadowBlur | Beállítja árnyék elmosódottságának méretét, alakzat körül. ( Értéke: Csak pozitív lehet. ) |
| shadowOffsetX | Beá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. ) |
| shadowOffsetY | Beá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; |