Médiaforma

Ombrer les éléments affichés dans un canvas

Print Friendly

Quatre propriétés permettent d’ombrer les éléments affichés dans un canvas :

  • shadowColor définit la couleur de l’ombrage.
  • shadowBlur définit le flouté de l’ombrage. Plus la valeur est grande, plus l’ombrage est flou.
  • shadowOffsetX définit le décalage horizontal de l’ombrage.
  • shadowOffsetY définit le décalage vertical de l’ombrage.

Ces propriétés s’appliquent à tous les objets affichés dans le canevas. A titre d’exemple, nous allons les appliquer à un rectangle plein et à un texte. Voici le code utilisé :

Lorsque l’utilisateur clique sur le bouton, la fonction ombrage() est exécutée.

Comme toujours, les premières instructions de la fonction récupèrent le contexte et le stockent dans la variable ctxt.

Les quatre instructions suivantes définissent les caractéristiques de l’ombrage :

  • le décalage horizontal est de 5 pixels :
    ctxt.shadowOffsetX = 5;
  • le décalage vertical est de 5 pixels :
    ctxt.shadowOffsetY = 5;
  • le flouté est modéré :
    ctxt.shadowBlur = 4;
  • l’ombrage est gris et semi-transparent :
    ctxt.shadowColor   = ‘rgba(100, 100, 100, 0.5)’;

Les deux instructions suivantes tracent un rectangle ombré de couleur bleue en 20, 150. Le rectangle fait 150 pixels de large et 100 pixels de haut.

ctxt.fillStyle     = ‘#00f’;

ctxt.fillRect(20, 150, 150, 100);

Enfin, les trois dernières instructions affichent un texte ombré à 10 pixels du bord gauche et à 50 pixels du bord supérieur :

ctxt.strokeStyle = ‘#f00’;

ctxt.font = ‘bold 50px Algerian’;

ctxt.strokeText(‘Bonjour’, 10, 50);

Voici le résultat dans Internet Explorer :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply