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 ]
Lundi 25 mars 2019 - Semaine 13 - Saint Humbert (Demain: Sainte Larissa)
Aujourd'hui, c'est l'anniversaire de Marcia Cross (1962-57 ans), comédienne américaine (rôle de Bree Van de Kamp dans Desperate Housewives). Autre 25 mars: 1918 : décès à Paris du compositeur français Claude Debussy. 1984 : Alain Prost gagne le grand prix de Formule 1 du Brésil.
Haut de page Easy-Micro