Wie gestalte ich HTML5-Canvas-Text fett und / oder kursiv?

83

Ich drucke Text ziemlich einfach auf eine Leinwand:

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

Aber wie kann ich den Text fett, kursiv oder beides ändern? Irgendwelche Vorschläge, um dieses einfache Beispiel zu beheben?

— Ritchie
quelle

154

Sie können Folgendes verwenden:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

Weitere Informationen finden Sie hier:

— Krapfen
quelle

2

Arg hat mich geschlagen, +1 Tolle Seite für weitere Informationen, diveintohtml5.org/canvas.html#divingin

— Loktar

@Loktar Danke für den Link, der in die Antwort aufgenommen wurde.

— Donut

bezüglich unterstreichen: stackoverflow.com/questions/4627133/…

— jedierikb

4

Sie können auch die Schriftgröße angeben:ctx.font = "400 10pt Courier"

— Ivan P

Die Schriftgewichtung über ctx.font = "400 10pt Open Sans"hat in Chrome mit Calibri oder Open Sans in den neuesten Browserversionen nicht funktioniert

— sean2078

12

Nur ein zusätzlicher Hinweis für alle, die darüber stolpern: Befolgen Sie unbedingt die in der akzeptierten Antwort angegebene Reihenfolge.

Ich hatte einige browserübergreifende Probleme, als ich die falsche Reihenfolge hatte. "10px Verdana fett" funktioniert in Chrome, jedoch nicht in IE oder Firefox. Das Umschalten auf "fett 10px Verdana" wie angegeben behebt diese Probleme. Überprüfen Sie die Reihenfolge, wenn Sie auf ähnliche Probleme stoßen.

— tddawson
quelle

Chrome scheint sich geändert zu haben, sodass es mit Firefox übereinstimmt. Siehe diesen Stift: codepen.io/anon/pen/BXNZxO

— ecc521

2

Es gibt also keine Möglichkeit, nur einen JS-Befehl festzulegen font-weight(oder font-sizeoder font-family...). Es muss alles in einer vollständigen Schriftzeichenfolge sein?

— Jonathan Tuzman
quelle

1

Unterstreichen ist durch keine der Canvas-Methoden oder -Eigenschaften möglich. Aber ich habe ein bisschen daran gearbeitet, um es zu erledigen. Sie können es unter http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround überprüfen

Die Implementierung finden Sie hier http://jsfiddle.net/durgesh0000/KabZG/

— Durgesh
quelle