Médiaforma

All posts tagged strokestyle

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 :


Dans cette rubrique, vous allez apprendre à tracer une bordure autour d’un rectangle avec la fonction strokeRect(). La couleur de la bordure sera définie avec la propriété strokeStyle et son épaisseur avec la propriété lineWidth.

Voici le code utilisé :

Lorsque l’utilisateur appuie sur le bouton, la fonction JavaScript contour() est exécutée. La ligne 13 définit la variable el pour faciliter l’accès au canevas. La ligne 14 récupère le contexte du canevas. Il ne reste plus qu’à initialiser les propriétés strokeStyle, pour définir la couleur du contour, et lineWidth pour définir l’épaisseur du contour. La fonction strokeRect() dessine le contour.

Voici le résultat dans Internet Explorer :