Стилизация текста на HTML5 canvas: bold и italic

Быстрый ответ

Для стилизации текста на HTML5-холсте используйте свойство font 2D-контекста. Сочетание ключевых слов "bold", "italic", указание размера шрифта в пикселях и названия семейства шрифтов позволит преобразить текст следующим образом:

var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.font = 'bold italic 20px Arial';    // Формула для комбинации жирного и курсивного текста
ctx.fillText('Жирный курсивный текст', 50, 100); // Позиционируем текст на холсте

Вкратце, задайте свойство ctx.font нужным стилем, затем отрисуйте текст с помощью ctx.fillText.

Применение синтаксиса CSS для стилизации текста

Эффективным подходом является применение стилизации CSS для оформления шрифта. Это свойство включает стиль, жирность, размер и семейство шрифтов.

ctx.font = 'italic bold 20px Courier'; // Собираем стильный текст!

Имеем следующее:

• "italic" и "bold" – стили текста.
• "20px" – размер шрифта.
• "Courier" – название шрифтового семейства.

Следуя порядку: сначала указываются стиль и жирность, затем размер и семейство шрифтов.

Измерение ширины и высоты текста

Чтобы разместить текст точно, измерьте его:

var metrics = ctx.measureText('Сюда впишите ваш текст'); // Можно измерить даже невидимый текст!
var width = metrics.width;

Эти данные помогут установить оптимальное межстрочное расстояние и выравнивание.

"Lifehacks" для подчеркивания текста

Хотя HTML5-холст напрямую не поддерживает подчеркивание текста, существуют обходные пути. Например, возможно нарисовать линию под текстом:

ctx.fillText("Подчеркнуто ли уже?", 50, 100);
ctx.beginPath();
ctx.moveTo(50, 105);
ctx.lineTo(50 + width, 105);
ctx.stroke();   // Хорошо получилось, не так ли?

Уточняйте координаты moveTo и lineTo, чтобы они соответствовали размерам текста.

Визуализация

О том, как делать смайлики, также всё довольно просто:

Canvas: Пространство для творчества
Атрибут Bold: Добавляет уверенности тексту 💪
Атрибут Italic: Придает тексту изящество 🛋️

Демонстрация в действии:

ctx.font = "20px Arial";                   // Представляем господина Обычного
ctx.fillText("Обычный текст", 10, 30);    // "Привет, я как все!" – говорит он.

ctx.font = "bold 20px Arial";              // Встречаем господина Накачанного 💪
ctx.fillText("Жирный текст", 10, 60);     // "Ты тоже тренируешься, брат?" – подзадоривает он.

ctx.font = "italic 20px Arial";            // Прошу любить и жаловать, мадам Изящество 🛋️
ctx.fillText("Курсивный текст", 10, 90);  // "Кривые — это так красиво!" – мурлычет она.

Таким образом, холст оживает разнообразными стилями текстового оформления.

Обеспечение совместимости в разной браузерах

Для того чтобы Ваше творчество выглядело одинаково хорошо в Firefox и в Chrome, необходимо соблюдать правильный порядок при установке свойства шрифта:

ctx.font = 'italic bold 14px sans-serif'; // Следуйте этому шаблону

Соблюдая данное правило, Вы гарантируете совместимость в разных браузерах.

Соблюдение принципов доступности при стилизации шрифтов

Не забывайте о принципах доступности веба во время работы с холстом HTML5. Помимо эстетической привлекательности, уделите внимание также:

• Контрастности между текстом и фоном для четкости восприятия.
• Читаемости шрифтов на различных устройствах.
• Осмысленному размещению текста для учета особенностей пользователей с дислексией или слабовидящих.

Доступный дизайн — это всегда деликатный вопрос.

Полезные материалы

1. CanvasRenderingContext2D: свойство font – Web APIs | MDN — руководство MDN по стилизации шрифтов на холсте HTML5.
2. Свойство font элемента canvas — учебник W3Schools, где подробно описана работа со свойством font на холсте.
3. Учебник по шрифтам текста HTML5 Canvas, их размеру и стилю — Все о шрифтах на холсте обсуждается здесь детально.
4. TextMetrics – Web APIs | MDN — Информация о тонкостях настройки стилизации текста.
5. Погружение в HTML Canvas — Полное руководство по шрифтам на холсте.