Як я можу оформити текст полотна HTML5 жирним та / або курсивом?

84

Я друкую текст на полотні досить прямо вперед:

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

Але як я можу змінити текст на напівжирний, курсив або обидва? Будь-які пропозиції, щоб виправити цей простий приклад?

javascript  html  canvas  typography 
— Річі
джерело

Відповіді:

155

Ви можете використовувати будь-що з наведеного:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

Для отримання додаткової інформації, ось кілька джерел:

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

Просто додаткове зауваження для тих, хто натрапляє на це: обов’язково дотримуйтесь порядку, показаного у прийнятій відповіді.

Я зіткнувся з деякими проблемами між браузерами, коли в мене було неправильне замовлення. Наявність "10px Verdana bold" працює в Chrome, але не в IE або Firefox. Переключення на "жирний 10 пікселів Вердана", як зазначено, вирішило ці проблеми. Перевірте замовлення, якщо у вас виникнуть подібні проблеми.

— tddawson
джерело
Здається, Chrome змінився так, що він відповідає Firefox. Дивіться цю ручку: codepen.io/anon/pen/BXNZxO
— ecc521
2

Отже, немає можливості просто встановити font-weight( font-sizeабо font-family...) в одній команді JS? Це все повинно бути в одному повному рядку шрифту?

— Джонатан Тузман
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.