Attribut shadowOffsetX du canvas HTML

Manuel de référence HTML5 Canvas

Définition et utilisation

shadowOffsetX Cette propriété définit ou retourne la distance horizontale entre la forme et l'ombre.

  • shadowOffsetX=0 Indique que l'ombre est située directement sous la forme
  • shadowOffsetX=20 Indique que l'ombre est située 20 pixels à droite de la position left de la forme
  • shadowOffsetX=-20 Indique que l'ombre est située 20 pixels à gauche de la position left de la forme

Astuce :Pour ajuster la position verticale de l'ombre par rapport à la forme, utilisez shadowOffsetY Propriétés.

Exemple

Tracez un rectangle avec une ombre décalée vers la droite de 20 pixels (à partir de la position left du rectangle) :

Votre navigateur ne prend pas en charge la balise canvas.

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

Essayez-le vous-même

Syntaxe

context.shadowOffsetX=number;

Valeur de l'attribut

Valeur Description
number Valeur positive ou négative, définissant la distance horizontale entre l'ombre et la forme.

Détails techniques

Valeur par défaut : 0

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

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

Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.

Manuel de référence HTML5 Canvas