Propriété shadowOffsetX
Exemple
Dessinez un rectangle avec une ombre placée à 20 pixels à droite (par rapport à la position gauche du rectangle) :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 80); Description
La propriété shadowOffsetX définit ou renvoie la distance horizontale de l'ombre par rapport à la forme.
La valeur par défaut est 0.
| Valeur | Description |
|---|---|
| 0 | L'ombre est juste derrière la forme |
| 20 | L'ombre commence à 20 pixels à droite de la position gauche de la forme |
| -20 | L'ombre commence à 20 pixels à gauche de la position gauche de la forme |
Voir aussi :
La propriété shadowOffsetY (Définir la position y de l'ombre)
La propriété shadowColor (Définir la couleur de l'ombre)
La propriété shadowBlur (Définir le flou de l'ombre)
La méthode fillRect() (Dessiner un rectangle rempli)
La propriété fillStyle() (Définir la couleur/style de remplissage)
Syntaxe
| context .shadowOffsetX = number |
Valeurs de propriété
| Valeur | Description | Jouez-le |
|---|---|---|
| number | La distance horizontale de l'ombre par rapport à la forme |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
shadowOffsetX est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |