Как сделать текст холста HTML5 жирным и / или курсивом?

85

Я печатаю текст на холсте довольно простым способом:

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

Но как изменить текст на полужирный, курсив или и то, и другое? Есть предложения по исправлению этого простого примера?

javascript html canvas typography Ричи
источник

Ответы:

157

Вы можете использовать любой из них:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

Для получения дополнительной информации вот несколько ресурсов:

Пончик
источник
2
Арг превзошел меня, +1 Отличный сайт для получения дополнительной информации, diveintohtml5.org/canvas.html#divingin
Локтар 01
@Loktar Спасибо за ссылку, включенную в ответ.
Donut
относительно подчеркивания: stackoverflow.com/questions/4627133/…
jedierikb
4
Также можно указать толщину шрифта:ctx.font = "400 10pt Courier"
Иван П
Плотность шрифта via ctx.font = "400 10pt Open Sans"не работала для меня в Chrome с использованием Calibri или Open Sans в последних версиях браузера
sean2078,
12

Еще одно предупреждение для тех, кто наткнется на это: обязательно следуйте порядку, указанному в принятом ответе.

Я столкнулся с некоторыми проблемами кроссбраузерности, когда указывал неправильный порядок. Использование «10px Verdana bold» работает в Chrome, но не в IE или Firefox. Переключение на «жирный шрифт 10px Verdana», как указано, устранило эти проблемы. Еще раз проверьте порядок, если вы столкнетесь с подобными проблемами.

тддоусон
источник
Похоже, что Chrome изменился и теперь соответствует Firefox. См. Это перо: codepen.io/anon/pen/BXNZxO
ecc521
2

Значит, нет возможности просто установить font-weight(или font-sizeили font-family...) в одной команде JS? Все должно быть в одной полной строке шрифтов?

Джонатан Тузман
источник
0

Если вам нужно учесть различия в форматировании, вы можете установить стиль шрифта, нарисовать текст, измерить его с помощью measureText, установить новый стиль, а затем нарисовать следующий блок следующим образом:

// 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>
Развернуть фрагмент

Дальнейшее чтение

KyleMit
источник