JavaScript Academy · Урок

Настройка контекста Canvas

Получайте и настраивайте контекст двумерного рендеринга.

«Настройка контекста Canvas» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое интерфейс Canvas

Интерфейс Canvas позволяет рисовать двумерную графику с помощью JavaScript на элементе <canvas>. Вы получаете рабочую поверхность из пикселей и набор команд для рисования фигур, изображений и текста.

Разметка состоит из одного тега <canvas>.
Все рисование выполняется в JavaScript через объект контекста.

<canvas id="board" width="320" height="200"></canvas>

Получение контекста

Вызовите getContext('2d') у элемента canvas, чтобы получить CanvasRenderingContext2D. Каждая команда рисования проходит через этот объект.

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

Система координат

Начало координат (0, 0) находится в верхнем левом углу. Значения X растут вправо, а значения Y — вниз. У canvas размером 320x200 нижний правый угол имеет координаты (320, 200).

Атрибуты ширины и высоты

Атрибуты HTML width и height задают размер буфера рисования в пикселях. Если их не указать, по умолчанию используется размер 300x150. Установка этих атрибутов в JS также очищает canvas.

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

Размер CSS и размер буфера

Свойства CSS width/height растягивают canvas на экране, но NOT изменяют буфер пикселей. Если они отличаются от атрибутов, рисунки выглядят размытыми или растянутыми. Для чёткого результата синхронизируйте эти значения.

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

Работа с экранами высокого DPI

На дисплеях с высокой плотностью пикселей значение devicePixelRatio часто равно 2. Увеличьте масштаб буфера и уменьшите масштаб контекста, чтобы линии оставались чёткими.

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

Настройка стилей заливки и обводки

Состояние рисования хранится в контексте. fillStyle задаёт цвет заливки, а strokeStyle — цвет контура. Они принимают любую строку цвета CSS.

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

Ваш первый рисунок

Когда контекст готов, можно сразу рисовать. fillRect(x, y, w, h) рисует закрашенный прямоугольник, используя текущий fillStyle.

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

Очистка canvas

clearRect(x, y, w, h) стирает прямоугольную область, возвращая её к прозрачному состоянию. Очистка всего буфера обычно выполняется в начале каждого кадра анимации.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Сохранение и восстановление состояния

save() помещает текущий стиль и преобразование в стек, а restore() извлекает их обратно. Это изолирует временные изменения.

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

Обнаружение возможностей

Защитите код от очень старых браузеров: перед использованием проверьте, существует ли getContext.

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

Быстрая проверка

Проверьте понимание настройки canvas.

Повторение: настройка Canvas

Вы научились получать canvas, вызывать getContext('2d'), понимать начало координат в верхнем левом углу, задавать размер буфера и размер CSS, работать с высокой плотностью пикселей через devicePixelRatio и настраивать fillStyle/strokeStyle. Далее — рисование фигур и контуров.

Часто задаваемые вопросы

Урок «Настройка контекста Canvas» бесплатный?

Да — полный текст урока «Настройка контекста Canvas» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка контекста Canvas»?

Получайте и настраивайте контекст двумерного рендеринга. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Настройка контекста Canvas»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy