Easy-Micro


LANGAGE HTML5 CANVAS
Texte

Le texte et ses effets dans un canvas HTML5

C'est la methode fillText qui sera utilisée pour ecrire du texte :



<canvas id="monCanvas" width="265" height="60" style="border:none;"></canvas>

<script type="text/javascript">
var c=document.getElementById("monCanvas");
var ctx=c.getContext('2d');

var text = 'Easy-Micro';
ctx.font = "30pt Verdana";
ctx.textAlign = "left";
ctx.fillStyle = "darkorange";
ctx.fillText(text,25,50); // doit être saisie en dernier

</script>

La methode fillText attend trois paramètres :
fillText('le texte', coordx, coordy)

Texte dans canvas avec ombre



Rajouter ces lignes de code avant la ligne de la methode fillText :
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 7;
ctx.shadowColor = "rgba(0, 0, 0, 1)";

Explication:
  • shadowOffsetX et shadowOffsetY
    Ce sont les deux valeurs de longueur pour définir le décalage de l'ombre. shadowOffsetX définit la distance horizontale. Les valeurs négatives placent l'ombre à gauche de l'élément. shadowOffsetY définit la distance verticale. Les valeurs négatives placent l'ombre au-dessus de l'élément. Si les deux valeurs sont à 0, l'ombre est placée derrière l'élément.
  • shadowBlur
    Modifie le flou de l'ombre portée. Une valeur plus grande augmente le flou de l'ombre portée.

A comparer avec la propriété CSS box-shadow

Pour aller plus loin...



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Dimanche 21 juillet 2019 - Semaine 29 - Saint Victor (Demain: Sainte Marie-Madeleine)
Aujourd'hui, c'est l'anniversaire de Hubert-Felix Thiefaine (1948-71 ans), chanteur français et de Charlotte Gainsbourg (1971), actrice française. Autre 21 juillet: 1798 - Victoire de la "bataille des pyramides" par Bonaparte.
Haut de page Easy-Micro