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 15 septembre 2019 - Semaine 37 - Saint Roland (Demain: Sainte Edith)
Aujourd'hui, c'est l'anniversaire de Tommy Lee Jones (1946-73 ans), acteur et réalisateur américain (Le Fugitif, Entre Ciel et Terre, Men in Black...). Autre 15 septembre: 1997 - Enregistrement du nom de domaine "google.com".
Haut de page Easy-Micro