Comment dessiner des rectangles et du texte avec le canevas HTML5 - les nuls

Quelques formes primitives peuvent être dessinées directement dans le contexte graphique de l'élément canvas de HTML5 Les formes les plus courantes sont les rectangles et le texte, qui peuvent également avoir des ombres Voici comment vous créez les deux

Rectangles rectangles avec canevas HTML5

Vous pouvez dessiner trois types de rectangles différents, comme indiqué dans la figure:

• clearRect (x, y, w, h) : Efface un rectangle avec le coin supérieur gauche (x, y) et la taille (w, h) Généralement, l'effacement dessine en arrière-plan couleur

• fillRect (x, y, w, h) : Dessine une boîte avec le coin supérieur gauche (x, y) et la taille (w Le rectangle est rempli avec le fillStyle actuellement défini.

• strokeRect (x, y, w, h) : Dessine une boîte avec le coin supérieur gauche (x, y) et la taille (w, h). La boîte n'est pas remplie, mais le contour est dessiné dans le strokeStyle actuellement défini et usi ng la largeur de ligne actuelle.

  

Voici le code qui génère la figure:

function draw () {var drawing = document. getElementById ("dessin"); var con = dessin. getContext ("2d"); con. fillStyle = "rouge"; con. strokeStyle = "vert"; con. lineWidth = "5"; con. fillRect (10, 10, 180, 80); con. strokeRect (10, 100, 180, 80);} // fin dessine

Dessine du texte avec le canevas HTML5

La balise canvas a un support complet pour le texte. Vous pouvez ajouter du texte n'importe où sur le canevas, en utilisant le style de police et la taille que vous souhaitez, comme indiqué dans cette illustration d'un canevas avec du texte incorporé:

La première étape du dessin consiste à sélectionner la police. Les polices de canevas sont créées en affectant une police à l'attribut de police du contexte. Les polices sont définies comme l'affectation de police à une seule chaîne dans CSS. Vous pouvez spécifier toutes les caractéristiques de police dans le même ordre que vous utilisez le raccourci de police: style, variant, poids, taille et famille.

Lorsque vous êtes prêt à afficher du texte sur l'écran, utilisez la méthode fillText (), qui accepte trois paramètres: le texte à afficher et les positions X et Y du côté gauche du texte. Le code suivant a produit les résultats dans la figure:

function draw () {var drawing = document. getElementById ("dessin"); var con = dessin. getContext ("2d"); // efface le fond con. fillStyle = "blanc"; con. fillRect (0, 0, 200, 200); // Dessine une police en rouge con. fillStyle = "rouge"; con. font = "20pt sans-serif"; con. fillText ("Canvas Rocks!", 5, 100); con. strokeText ("Canvas Rocks!", 5, 130);} // fin du dessin