Comment dessiner des graphiques de texte dans un canevas HTML5

En HTML5, vous devez d'abord utiliser la balise pour créer un canevas, puis utiliser l'attribut de police JavaScript, la méthode fillText() ou StrokeText() pour dessiner des graphiques de texte dans le canevas.

La balise de HTML5 peut être utilisée pour dessiner divers graphiques sur des pages Web, alors comment dessiner des graphiques textuels ? Cet article vous présentera la méthode de dessin de graphiques textuels dans un canevas HTML5. J'espère qu'il vous sera utile. [Recommandation du didacticiel vidéo : Tutoriel HTML5]

Utilisez la balise 🎜>

Sur une page HTML, le canevas est une zone rectangulaire. Il est spécifié à l'aide de l'élément tag canvas ; par défaut, le canevas n'a ni bordure ni contenu, il est comme un conteneur. Mais nous pouvons utiliser ses propriétés intégrées ou CSS pour ajouter des styles.

Exemple : utilisez les attributs width et height pour définir la largeur et la hauteur.

<canvas id = "mycanvas" width ="400" height ="250"> </canvas>

Nous pouvons également utiliser du CSS pour ajouter des bordures et des couleurs de fond au canevas, par exemple :

<canvas id="myCanvas" width="300"    style="max-width:90%" style="border:2px solid red;background-color:pink">当前的浏览器不支持HTML5 canvas标签。</canvas>

Si le canevas ne peut pas être créé, juste Le contenu de la balise sera affiché, indiquant que le navigateur actuel ne prend pas en charge la balise HTML5 canvas.

Rendu :

Utilisez JavaScript pour dessiner des graphiques de texte dans le canevas

Tout d'abord, jetons un coup d'œil aux

attributs et méthodes les plus importants qui doivent être utilisés pour dessiner des graphiques de texte sur le canevas :

1

attribut de police  : définit. l'attribut de police de texte, grâce auquel vous pouvez définir ou renvoyer l'attribut de police actuel du contenu du texte sur le canevas. Son utilisation est similaire à la propriété de police CSS.

2.

Méthode fillText()  : Dessinez le texte "fill" sur le canevas. La couleur par défaut du texte est : noir. La syntaxe de base est la suivante :

fillText(text, x, y, [maxWidth])

3.

Méthode StrokeText()  : Dessinez le texte sur le canevas (sans remplissage), c'est-à-dire dessinez le graphique du contour du texte de la même manière ; la couleur du texte est par défaut :noir. La syntaxe de base est la suivante :

strokeText(text, x, y, [maxWidth])

Description du paramètre :

text : indique les graphiques de texte qui doivent être affichés sur le canevas.

x, y : par rapport au canevas, la position des coordonnées x et y du début du dessin du texte.

maxWidth : paramètre facultatif, indiquant la largeur maximale du texte autorisée, en pixels.

Jetons un coup d'œil aux autres attributs de style du texte qui peuvent être utilisés :

1. Attribut de style textAlign : définit ou renvoie l'alignement actuel du contenu du texte en fonction de la coordonnée de l'axe X.

Les valeurs sont : start (valeur par défaut, précisez la position de départ du texte), end (précisez la position de fin du texte), center (précisez la position de placement du centre du texte) , gauche (alignement à gauche), droite (alignement à droite).

2. Attribut fillStyle : définit ou renvoie la couleur, le dégradé ou le mode utilisé pour remplir le tableau.

Dessinons des graphiques de texte et voyons comment les dessiner à travers des exemples :

Exemple 1 : utilisez fillText()

<canvas id ="myCanvas" width ="400" height ="250" style="border:2px solid red;">当前浏览器不支持HTML5 canvas标记。</canvas>

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "40px Arial";
ctx.fillText("PHP中文网！",10,50);
</script>

Rendu :

Exemple 2 : Utilisation de StrokeText()

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "40px Arial";
ctx.strokeText("PHP中文网！",10,50);
</script>

Rendu :

Exemple 3 : Ajouter de la couleur et centrer le texte

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d");  
ctx.font="30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("PHP中文网！",canvas.width/2, canvas.height/2);
</script>

Rendu :

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!