Comment dessiner des graphiques de texte dans un canevas HTML5

Utilisez JavaScript pour dessiner des graphiques de texte dans le canevas

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

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.

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])

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 :

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>

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>

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>

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!