Comment est-ce que je donne un style gras et / ou italique au texte de toile html5?

Question

J'imprime du texte sur une toile de manière assez simple, comme indiqué:

 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 résoudre ce simple exemple?

Answer 1

Vous pouvez utiliser n'importe lequel de ceux-ci:

 ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

Pour plus d'informations, voici quelques ressources:

• Plongez dans HTML5
• Comment afficher du texte sur une toile
• Toile HTML5 - les bases

Answer 2

Juste un avertissement supplémentaire pour ceux qui trébuchent: assurez-vous de suivre l'ordre indiqué dans l'erreur acceptée.

Je me suis heurté à des problèmes de navigation entre différents navigateurs lorsque mon ordre était mauvais. Avoir "10px Verdana bold" fonctionne dans Chrome, mais pas dans IE ou Firefox. Le passage à "audacieux 10px Verdana" comme indiqué corrigeait ces problèmes. Vérifiez bien la commande si vous rencontrez des problèmes similaires.

Answer 3

Le soulignement n'est possible par aucune des méthodes ou propriétés de la toile. Mais j'ai travaillé pour le faire. Vous pouvez y accéder à l' adresse http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround.

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