HTML5 Canvas - 1.5 Ajouter des ombres aux figures

Une ombre donne du relief à un dessin sur Canvas. L'API propose quatre propriétés pour la créer : la couleur, le décalage horizontal, le décalage vertical et le flou. Cette leçon les applique à quatre figures.

Les quatre propriétés d'ombre

shadowColor définit la couleur de l'ombre. shadowOffsetX et shadowOffsetY décalent l'ombre à l'horizontale et à la verticale. shadowBlur règle la portée de l'ombre, c'est-à-dire son flou.

Dans la démonstration, l'ombre est bleue, avec un décalage de 10 en X et de 10 en Y. La vidéo ne précise pas clairement la valeur de flou utilisée. Testez plusieurs valeurs pour voir l'effet.

context.shadowColor = 'blue';
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;

Appliquer les ombres aux figures

Les propriétés d'ombre s'appliquent aux figures dessinées après elles. Pour des ombres différentes, réglez les propriétés avant chaque figure.

Enregistrez le fichier et rechargez la page pour voir les quatre figures avec leurs ombres.

• Choisir shadowColor
• Régler shadowOffsetX et shadowOffsetY
• Régler shadowBlur
• Enregistrer et recharger la page

En résumé

Les ombres sur Canvas se règlent avec quatre propriétés : la couleur, le décalage en X, le décalage en Y et le flou. Elles s'appliquent aux figures dessinées après leur définition. Testez différentes valeurs pour trouver le rendu souhaité.

Points clés

• shadowColor définit la couleur de l'ombre.
• shadowOffsetX et shadowOffsetY déplacent l'ombre.
• shadowBlur adoucit la portée de l'ombre.
• Les propriétés doivent être définies avant de dessiner la figure.
• Des couleurs différentes par figure donnent un rendu varié.

Questions fréquentes

Pourquoi mon ombre n'apparaît-elle pas ?

Vérifiez que les propriétés sont définies avant le dessin de la figure, puis enregistrez le fichier et rechargez la page.

Que fait shadowBlur ?

Cette propriété règle la portée de l'ombre. Plus la valeur est élevée, plus l'ombre est floue.

Comment obtenir une ombre vers le bas et à droite ?

Utilisez des valeurs positives pour shadowOffsetX et shadowOffsetY, comme 10 dans la vidéo.