Comment définir la couleur de la police du canevas HTML5 ? (exemple de code)

Dans le canevas HTML5, nous pouvons utiliser l'attribut fillStyle pour définir la couleur de la police du texte. Il peut accepter une valeur de code de couleur, telle que #cc0000, ou un mot anglais d'une couleur, telle que rouge. Jetons-y un coup d'œil ci-dessous, en espérant que cela sera utile à tout le monde. [Recommandation du didacticiel vidéo : Tutoriel HTML]

Nous devons d'abord créer un canevas à l'aide de la balise canvas dans la page HTML et définir sa valeur d'identification sur ma toile.

<canvas id="myCanvas"></canvas>

Utilisez ensuite JavaScript pour dessiner des graphiques de texte dans le canevas

1 Obtenez le contrôle canevas

var canvas = document.getElementById("myCanvas");// 查找画布元素

Utilisez la méthode getContext() pour configurer. l'environnement de dessin, créez un objet de dessin

var ctx = canvas.getContext("2d");

3. Utilisez la méthode fillText pour écrire du texte dans le canevas. Les paramètres sont le contenu du texte et l'emplacement du texte.

Nous pouvons également utiliser l'attribut font pour définir la taille et le type de police du texte.

ctx .font="20px 微软雅黑";
ctx .fillText('PHP中文网',20,20,200);

Rendu :

Vous pouvez voir que le texte affiché sur la page est désormais le texte noir par défaut.

3. Si vous souhaitez définir la couleur de la police du texte, vous devez utiliser l'attribut fillStyle. Cet attribut peut accepter une valeur de code de couleur, telle que #cc0000, ou un mot anglais d'une couleur, telle que comme rouge.

ctx .fillStyle="red";

Code js complet :

<canvas id="myCanvas"></canvas>

Rendu :

Ce qui précède est tout le contenu de cet article, je j'espère que cela pourra être utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

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!