Работа с изображениями и текстом
Рисуйте изображения и стилизованный текст на canvas.
«Работа с изображениями и текстом» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Загрузка изображения
Canvas рисует из объекта HTMLImageElement. Создайте объект Image, задайте его src и дождитесь onload перед рисованием — пиксели недоступны до этого момента.
const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";Основы drawImage
drawImage(img, dx, dy) рисует изображение в указанной позиции с его естественным размером.
img.onload = () => {
ctx.drawImage(img, 20, 20);
};Масштабирование изображений
Форма с пятью аргументами drawImage(img, dx, dy, dWidth, dHeight) масштабирует изображение в заданную область.
ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90Обрезка с помощью исходного прямоугольника
Форма с девятью аргументами позволяет обрезать изображение: drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). Первые четыре аргумента описывают фрагмент исходного изображения.
ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100Рисование залитого текста
fillText(text, x, y) рисует текст с помощью fillStyle. По умолчанию координата y задаёт базовую линию текста.
ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);Текст с контуром
strokeText(text, x, y) рисует только контур текста, используя strokeStyle и lineWidth.
ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);Свойство font
font использует сокращённый синтаксис CSS: [style] [weight] size family. Размер и семейство шрифтов обязательны.
ctx.font = "italic bold 28px Georgia, serif";Выравнивание текста
textAlign (start/end/left/right/center) задаёт горизонтальную привязку, а textBaseline (top/middle/alphabetic/bottom) — вертикальную привязку относительно указанной точки.
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);Измерение текста
measureText(text) возвращает объект TextMetrics. Его свойство width показывает, какую ширину займёт текст при рисовании, что необходимо для размещения и переноса строк.
const m = ctx.measureText("How wide?");
console.log(m.width); // pixelsПростой перенос слов
Объедините measureText с циклом, чтобы переносить длинные строки на несколько линий.
function wrap(ctx, text, x, y, maxW, lh) {
let line = "";
for (const word of text.split(" ")) {
const test = line + word + " ";
if (ctx.measureText(test).width > maxW && line) {
ctx.fillText(line, x, y);
line = word + " ";
y += lh;
} else {
line = test;
}
}
ctx.fillText(line, x, y);
}Тени для создания объёма
Свойства тени применяются к фигурам, изображениям и тексту: shadowColor, shadowBlur, shadowOffsetX/Y.
ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);Быстрая проверка
Проверьте рисование изображений и текста.
Повторение: изображения и текст
Вы научились загружать изображения и рисовать их с масштабированием и обрезкой через drawImage, выводить текст с помощью fillText/strokeText, задавать font, выравнивать текст, измерять ширину через measureText и добавлять тени. Далее — анимация.
Часто задаваемые вопросы
Урок «Работа с изображениями и текстом» бесплатный?
Да — полный текст урока «Работа с изображениями и текстом» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Работа с изображениями и текстом»?
Рисуйте изображения и стилизованный текст на canvas. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Работа с изображениями и текстом»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка контекста Canvas
- Рисование фигур и контуров
- Работа с изображениями и текстом
- Анимация с requestAnimationFrame