Добавление и стилизация текста на HTML5 canvas

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

Для добавления текста на canvas применяется метод fillText(), предназначенный для объекта CanvasRenderingContext2D. С помощью свойства font конфигурируется шрифт, а с помощью fillStyle устанавливается цвет текста. Вот пример такого кода:

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Привет, Canvas!', 10, 50);

Координаты (10, 50) задают позицию текста на холсте.

Умение выравнивать текст с изыском

Для изящного горизонтального и вертикального расположения текста вам потребуются textAlign и textBaseline:

ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Центр внимания', canvas.width / 2, canvas.height / 2);

Если преисполнены рвения к экспериментам и к введению элемента динамичности, попробуйте повернуть или увеличить текст, вдохновившись творчеством:

ctx.rotate(0.2);
ctx.fillText('Просто вися на канате', canvas.width / 2, canvas.height / 2);

Создание обводки текста

Для стилизации через добавление к тексту обводки используйте метод strokeText() и свойство strokeStyle:

ctx.strokeStyle = 'blue';
ctx.strokeText('Смотрите, у меня есть обводка!', 10, 100);

Подробнее об этом расскажет наш спикер на видео

Лучшие практики и ознакомление с метрикой canvas

• Для того чтобы текст не искажался при масштабировании, следите за пропорциями canvas.
• Перед добавлением каждой уникальной строки текста устанавливайте стили, как, например, fillStyle и font.
• Функцию ctx.measureText('Ваш текст').width используйте для определения ширины текста, что поможет в его позиционировании.

Динамичное наполнение текстом canvas

Добавьте жизни своему холсту, меняя текст в ответ на события, например, отображая время:

function updateCanvas() {
  let now = new Date().toLocaleTimeString();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(now, 10, 50);
  requestAnimationFrame(updateCanvas);
}
updateCanvas();

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

Пустой canvas — это ваша электронная для объявлений, готовая превратить ваши мысли в текст:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Привет, мир!', 50, 100);

До: Пустой canvas (📜)
После: Canvas c "Привет, мир!" (📜 + 🌍🖋️❤️)

С его помощью вы можете передать свое сообщение в цифровом виде.

Достижение HD-качества текста

Для обеспечения высокого разрешения текста учтите соотношение пикселей устройства:

let dpr = window.devicePixelRatio || 1;
let rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
ctx.scale(dpr, dpr);
ctx.font = '20px Arial';
ctx.fillText('Острее ножа', 10, 50);

Достижение адаптивности отображения

Чтобы текст на canvas автоматически подстраивался под изменения размера экрана, используйте обработчик события resize:

window.addEventListener('resize', function() {
  ctx.font = '20px Arial';
  ctx.fillText('Гибкий как гимнаст!', canvas.width / 2, canvas.height / 2);
});

Отзывчивый дизайн гарантирует, что текст всегда будет в центре внимания, независимо от размера экрана.

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

1. Рисование текста – Веб-API | MDN — это полное руководство по использованию текста в Canvas API.
2. Метод fillText() для HTML canvas — здесь подробно объясняется, как происходит отображение текста на canvas.
3. Стандарт HTML — базовое руководство по внесению текста на элемент canvas в HTML5.
4. Учебное руководство по HTML5 Canvas для начинающих – YouTube — это видеоуроки по HTML5 Canvas с азов, включая работу с текстом.
5. Как прочитать и отобразить файл в расширении для Chrome – Stack Overflow — в этой дискуссии на Stack Overflow обсуждается работа с текстом на canvas.