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. ) |
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é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; |