HTML-canvas shadowOffsetY- eigenschap
Voorbeeld
Teken een rechthoek met een schaduw die 20 pixels onder de bovenste positie van de rechthoek is geplaatst:
javascript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowOffsetY = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 80);
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| shadowOffsetY | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definitie en gebruik
Met de eigenschap shadowOffsetY wordt de verticale afstand van de schaduw tot de vorm ingesteld of geretourneerd.
shadowOffsety = 0 geeft aan dat de schaduw zich direct achter de vorm bevindt.
shadowOffsetY = 20 geeft aan dat de schaduw 20 pixels onder de bovenste positie van de vorm begint.
shadowOffsetY = -20 geeft aan dat de schaduw 20 pixels boven de bovenste positie van de vorm begint.
Tip: gebruik de eigenschap shadowOffsetX om de horizontale afstand van de schaduw tot de vorm aan te passen .
| Standaardwaarde: | 0 |
|---|---|
| JavaScript-syntaxis: | context .shadowOffsetY = getal ; |
Eigendomswaarden
| Value | Description | Play it |
|---|---|---|
| number | A positive or negative number that defines the vertical distance of the shadow from the shape |
❮ Canvasobject