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 bevindt
  • shadowOffsetX=20 Dit geeft aan dat de schaduw zich 20 pixels rechts van de left positie van het vormgeven bevindt
  • shadowOffsetX=-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):

Uw browser ondersteunt de canvas tag niet.

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

Probeer het zelf uit

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.