HTML canvas shadowOffsetX eigenschap
Definitie en gebruik
shadowOffsetX
Eigenschappen instellen of retourneren de horizontale afstand tussen het vormgeven en de schaduw.
shadowOffsetX=0
Dit geeft aan dat de schaduw zich recht onder het vormgeven bevindtshadowOffsetX=20
Dit geeft aan dat de schaduw zich 20 pixels rechts van de left positie van het vormgeven bevindtshadowOffsetX=-20
Dit geeft aan dat de schaduw zich 20 pixels links van de left positie van het vormgeven bevindt
Tip:Gebruik shadowOffsetY Eigenschappen.
Voorbeeld
Teken een rechthoek met een schaduw die 20 pixels naar rechts verschoven is (vanuit de left positie van het rechthoek):
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.shadowBlur=10; ctx.shadowOffsetX=20; ctx.shadowColor="black"; ctx.fillStyle="blue"; ctx.fillRect(20,20,100,80);
Syntax
context.shadowOffsetX=number;
Eigenschapswaarde
Waarde | Beschrijving |
---|---|
number | Een positief of negatief getal, dat de horizontale afstand van de schaduw van de vorm definieert. |
Technische details
Standaardwaarde: | 0 |
---|
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Opmerking:Internet Explorer 8 en oudere versies ondersteunen geen <canvas> element.