Maison > Problème commun > Quelles polices Canvas prend-il en charge ?

Quelles polices Canvas prend-il en charge ?

小老鼠
Libérer: 2023-08-18 16:01:57
original
2229 Les gens l'ont consulté

Canvas prend en charge les polices telles que Arial, Times New Roman, Verdana, Courier New, Impact, etc. Introduction détaillée : 1. Arial, une police sans empattement couramment utilisée avec des lignes claires et une lisibilité, adaptée à divers scénarios d'application ; 2. Times New Roman, une police avec empattement traditionnelle avec une apparence élégante et une bonne lisibilité ; police serif utilisée pour l'affichage à l'écran ; 3. Courier New, etc.

Quelles polices Canvas prend-il en charge ?

L'environnement d'exploitation de ce tutoriel : système Windows 10, ordinateur Dell G3.

Canvas est un élément important du HTML5 et est utilisé pour dessiner des graphiques, des animations et d'autres effets visuels sur des pages Web. Dans Canvas, la sélection des polices est cruciale pour la conception et l’affichage du contenu textuel. Il existe de nombreux types de polices pris en charge par Canvas. Ce qui suit présente certaines polices couramment utilisées et comment les utiliser dans Canvas.

1. Arial : Arial est une police sans empattement couramment utilisée. Elle a des lignes claires et une lisibilité et convient à divers scénarios d'application. L'utilisation de la police Arial dans Canvas peut être obtenue en définissant la propriété de police sur "Arial".

2. Times New Roman : Times New Roman est une police serif traditionnelle, qui a une apparence élégante et une bonne lisibilité. Pour utiliser la police Times New Roman dans Canvas, vous pouvez définir la propriété de police sur « Times New Roman ».

3. Verdana : Verdana est une police sans empattement largement utilisée pour l'affichage à l'écran. Elle a un grand espacement des lettres et des lignes claires, et convient à l'affichage de grands titres et de textes importants. Pour utiliser la police Verdana dans Canvas, vous pouvez définir la propriété de police sur « Verdana ».

4. Courier New : Courier New est une police à largeur fixe avec une largeur égale pour chaque caractère, adaptée à l'affichage de code et de texte à largeur fixe. Pour utiliser la police Courier New dans Canvas, vous pouvez définir la propriété de police sur « Courier New ».

5. Impact : Impact est une police audacieuse sans empattement avec un fort impact visuel, adaptée aux titres volumineux et au texte ciblé. L'utilisation de la police Impact dans Canvas peut être obtenue en définissant la propriété de police sur "Impact".

En plus des polices couramment utilisées mentionnées ci-dessus, Canvas prend également en charge d'autres polices, telles que Georgia, Tahoma, Comic Sans MS, etc. Ils peuvent être utilisés en définissant la propriété font sur le nom de police correspondant.

Dans Canvas, la méthode d'utilisation des polices est la suivante :

1. Utilisez JavaScript pour obtenir l'objet contextuel de l'élément Canvas : var ctx = canvas.getContext("2d");

2. : ctx.font = " 20px Arial";

3. Dessinez le texte : ctx.fillText("Hello World", 50, 50);

Dans le code ci-dessus, l'attribut de police est défini sur une police Arial de 20 pixels. , et la méthode fillText est utilisée sur le Canvas. Le texte "Hello World" est dessiné à la position (50, 50).

Pour résumer, Canvas prend en charge de nombreuses polices, notamment Arial, Times New Roman, Verdana, Courier New, Impact, etc. En définissant la propriété font sur le nom de police correspondant, ces polices peuvent être utilisées dans Canvas pour afficher le contenu du texte.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal