web-dev-qa-db-fra.com

Comment styliser le texte du canevas HTML5 en gras et / ou en italique?

J'imprime du texte sur une toile d'une manière assez simple:

var ctx = canvas.getContext('2d');
ctx.font = "10pt Courier";
ctx.fillText("Hello World", 100, 100);

Mais comment puis-je changer le texte en gras, en italique ou les deux? Des suggestions pour corriger cet exemple simple?

javascripthtml5canvastypography
69
Ritchie

Vous pouvez utiliser n'importe lequel de ces éléments:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

ctx.font = "italic bold 10pt Courier";

Pour plus d'informations, voici quelques ressources:

129
Donut

Juste un avertissement supplémentaire pour toute personne qui tombe dessus: assurez-vous de suivre l'ordre indiqué dans la réponse acceptée.

Je suis tombé sur des problèmes de navigation croisée lorsque j'ai eu la mauvaise commande. Avoir "10px Verdana bold" fonctionne dans Chrome, mais pas dans IE ou Firefox. Le passer à "bold 10px Verdana" comme indiqué a résolu ces problèmes. Vérifiez à nouveau la commande si vous rencontrez des problèmes.

11
tddawson

Le soulignement n'est possible via aucune des méthodes ou propriétés du canevas. Mais j'ai fait un peu de travail pour le faire. Vous pouvez le vérifier @ http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround

Vous pouvez trouver l'implémentation ici http://jsfiddle.net/durgesh0000/KabZG/

1
Durgesh