Médiaforma

Du texte dans un canvas

Print Friendly

Il est également possible d’afficher du texte dans un élément canvas. Pour cela, vous utiliserez la fonction javaScript strokeText(). Avant d’exécuter cette fonction, vous définirez la couleur des caractères avec la propriété strokeStyle et la police à utiliser avec la propriété font.

Voici le code utilisé :

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

D’une façon très classique, cette fonction récupère le contexte du canevas et le stocke dans la variable ctxt.

La couleur du tracé est définie avec la propriété strokeStyle. Ici, le texte sera affiché en rouge.

Les caractéristiques de la police sont définies dans la propriété font. Ici, les caractères seront gras, ils auront une taille de 50 pixels et utiliseront la police Algerian.

Il ne reste plus qu’à afficher le texte avec la fonction strokeText(). Les deux paramètres de cette fonction spécifient les coordonnées de l’affichage. Ici, à 10 pixels du bord gauche et à 50 pixels du bord supérieur.

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