Добавление и стилизация текста на 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)
задают позицию текста на холсте.
[AsideBanner]
Умение выравнивать текст с изыском
Для изящного горизонтального и вертикального расположения текста вам потребуются 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);
});
Отзывчивый дизайн гарантирует, что текст всегда будет в центре внимания, независимо от размера экрана.
Полезные материалы
- Рисование текста – Веб-API | MDN — это полное руководство по использованию текста в Canvas API.
- Метод fillText() для HTML canvas — здесь подробно объясняется, как происходит отображение текста на canvas.
- Стандарт HTML — базовое руководство по внесению текста на элемент canvas в HTML5.
- Учебное руководство по HTML5 Canvas для начинающих – YouTube — это видеоуроки по HTML5 Canvas с азов, включая работу с текстом.
- Как прочитать и отобразить файл в расширении для Chrome – Stack Overflow — в этой дискуссии на Stack Overflow обсуждается работа с текстом на canvas.