HTML canvas shadowOffsetY eigenschap

HTML5 Canvas referentiemanual

Definitie en gebruik

shadowOffsetY Eigenschappen instellen of retourneren de verticale afstand tussen de vorm en de schaduw.

  • shadowOffsetY=0 Geeft aan dat de schaduw zich direct onder de vorm bevindt
  • shadowOffsetY=20 Geeft aan dat de schaduw zich 20 pixels onder de toppositie van de vorm bevindt
  • shadowOffsetY=-20 Geeft aan dat de schaduw zich 20 pixels boven de toppositie van de vorm bevindt

Tip:Gebruik deze om de horizontale positie van de vorm aan te passen: shadowOffsetX Eigenschappen.

Voorbeeld

Teken van een rechthoek met een schaduw van 20 pixels naar beneden (vanaf de toppositie 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.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

Probeer het zelf uit

Syntaxis

context.shadowOffsetY=number;

Eigenschapswaarde

Waarde Beschrijving
number Een positieve of negatieve waarde, die de verticale afstand tussen de schaduw en 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 niet het <canvas> element.

HTML5 Canvas referentiemanual