Canvas shadowOffsetX eigenschap

Canvas reference manual

Definitie en gebruik

shadowOffsetX Eigenschap instellen of retourneren van de horizontale afstand tussen de vorm en de schaduw.

  • shadowOffsetX=0 Indicatie dat de schaduw zich bevindt onder de vorm
  • shadowOffsetX=20 Indicatie dat de schaduw zich bevindt op 20 pixels rechts van de left positie van de vorm
  • shadowOffsetX=-20 Indicatie dat de schaduw zich bevindt op 20 pixels links van de left positie van de vorm

Tip:Gebruik deze om de verticale positie ten opzichte van de vorm aan te passen: 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

Syntaxis

context.shadowOffsetX=number;

Eigenschapswaarde

Waarde Beschrijving
number Het positieve of negatieve getal definieert de horizontale afstand tussen de schaduw en de vorm.

Technical details

Default value: 0

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Canvas reference manual