Jak ustawić pogrubienie i / lub kursywę w tekście kanwy HTML5?

85

Drukuję tekst na płótnie w dość prosty sposób:

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

Ale jak mogę zmienić tekst na pogrubiony, kursywę lub oba? Jakieś sugestie, jak naprawić ten prosty przykład?

javascript html canvas typography Ritchie
źródło

Odpowiedzi:

157

Możesz użyć dowolnego z tych:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

Aby uzyskać więcej informacji, oto kilka zasobów:

Pączek
źródło
2
Arg beat me to it, +1 Great site, aby uzyskać więcej informacji, diveintohtml5.org/canvas.html#divingin
Loktar
@Loktar Dzięki za link, zawarłem go w odpowiedzi.
Donut
dotyczące podkreślenia: stackoverflow.com/questions/4627133/ ...
jedierikb
4
Możesz także określić grubość czcionki:ctx.font = "400 10pt Courier"
Ivan P
Waga czcionki przez ctx.font = "400 10pt Open Sans"nie działała dla mnie w Chrome przy użyciu Calibri lub Open Sans w najnowszych wersjach przeglądarki
sean2078
12

Tylko dodatkowe ostrzeżenie dla każdego, kto się na to natknie: pamiętaj, aby postępować zgodnie z kolejnością podaną w zaakceptowanej odpowiedzi.

Wystąpiły problemy z różnymi przeglądarkami, gdy miałem złą kolejność. Pogrubiona czcionka „10px Verdana bold” działa w przeglądarce Chrome, ale nie w przeglądarce IE ani Firefox. Przełączenie go na „pogrubioną 10px Verdana”, jak wskazano, rozwiązało te problemy. Jeśli napotkasz podobne problemy, sprawdź dokładnie zamówienie.

tddawson
źródło
Wygląda na to, że Chrome zmienił się i jest zgodny z przeglądarką Firefox. Zobacz to pióro: codepen.io/anon/pen/BXNZxO
ecc521
2

Więc nie ma sposobu, aby po prostu ustawić font-weight( font-sizelub font-family...) w jednym poleceniu JS? To wszystko musi być w jednym pełnym ciągu czcionek?

Jonathan Tuzman
źródło
0

Jeśli chcesz pozwolić na różnice w formatowaniu, możesz ustawić styl czcionki, narysować tekst, zmierzyć go za pomocą measureText, ustawić nowy styl, a następnie narysować następny blok w następujący sposób:

// get canvas / context
var can = document.getElementById('my-canvas');
var ctx = can.getContext('2d')

// draw first text
var text = '99%';
ctx.font = 'bold 12pt Courier';
ctx.fillText(text, 50, 50);

// measure text
var textWidth = ctx.measureText(text).width;

// draw second text
ctx.font = 'normal 12pt Courier';
ctx.fillText(' invisible', 50 + textWidth, 50);
<canvas id="my-canvas" width="250" height="150"></canvas>
Rozwiń fragment

Dalsze czytanie

KyleMit
źródło