HTML5 CANVASTexte
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)
Rajouter ces lignes de code avant la ligne de la methode fillText :
Explication:
A comparer avec la propriété CSS box-shadow
<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)";
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
