Propriété shadowOffsetY
Exemple
Dessinez un rectangle avec une ombre placée 20 pixels en dessous de la position supérieure du rectangle :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowOffsetY = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 80); Description
La propriété shadowOffsetY définit ou renvoie la distance verticale 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 en dessous du haut de la forme. |
| -20 | L'ombre commence 20 pixels au-dessus du haut de la forme. |
Voir aussi :
La propriété shadowOffsetX (Définir la position x 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 .shadowOffsetY = number |
Valeurs de propriété
| Valeur | Description | Jouez-le |
|---|---|---|
| number | La distance verticale de l'ombre par rapport à la forme. |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
shadowOffsetY est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |