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?

— Ritchie
źródło

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

1

Podkreślenie nie jest możliwe za pomocą żadnej metody lub właściwości płótna. Ale trochę popracowałem, żeby to zrobić. Możesz to sprawdzić @ http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround

Implementację można znaleźć tutaj http://jsfiddle.net/durgesh0000/KabZG/

— Durgesh
ź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