0Pricing
HTML Academy · Урок

Настройка canvas и двумерного контекста

Создайте элемент canvas и получите двумерный контекст отрисовки

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

Элемент canvas

Элемент <canvas> представляет собой растровую поверхность для рисования в браузере:

<canvas id="myCanvas" width="800" height="400">
  <!-- Fallback for browsers without canvas support -->
  <p>Your browser does not support HTML5 Canvas.</p>
</canvas>

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

Всегда задавайте размеры canvas с помощью атрибутов HTML, а не CSS:

<!-- CORRECT: set intrinsic size via attributes -->
<canvas width="800" height="400"></canvas>

<!-- WRONG: CSS changes display size but not canvas resolution -->
<canvas style="width: 800px; height: 400px;"></canvas>
<!-- This stretches a default 300x150 canvas to 800x400
     Result: blurry graphics -->

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

Получите контекст 2D-отрисовки, чтобы рисовать:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// ctx is a CanvasRenderingContext2D object
// All drawing operations are methods on ctx

// Check browser support:
if (!canvas.getContext) {
  console.error('Canvas not supported');
}

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

Система координат canvas начинается в левом верхнем углу:

// (0, 0) = top-left corner
// (width, 0) = top-right
// (0, height) = bottom-left
// (width, height) = bottom-right

// For a 800x400 canvas:
// x increases left → right (0 to 800)
// y increases top → bottom (0 to 400)
//
// Example: draw at center:
ctx.fillRect(400, 200, 10, 10);  // centered dot

Состояние canvas

У canvas есть состояние рисования, которое можно сохранить и восстановить:

ctx.save();       // push current state onto a stack

// Change state:
ctx.fillStyle = 'red';
ctx.globalAlpha = 0.5;

// Draw with modified state...
ctx.fillRect(100, 100, 200, 200);

ctx.restore();    // pop state: back to pre-save settings

Очистка canvas

Очищайте весь canvas перед повторной отрисовкой, например при анимации:

// Clear entire canvas:
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Or with a background color:
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

fillStyle и strokeStyle

Задавайте цвета для операций заливки и обводки:

ctx.fillStyle = 'blue';                    // CSS color name
ctx.fillStyle = '#ff6600';                 // hex color
ctx.fillStyle = 'rgb(255, 100, 0)';       // rgb
ctx.fillStyle = 'rgba(255, 100, 0, 0.5)'; // rgba with alpha
ctx.fillStyle = gradient;                  // gradient object
ctx.fillStyle = pattern;                   // pattern object

ctx.strokeStyle = '#333333';               // border color

lineWidth и другие свойства стиля

Свойства обводки и стиля линий:

ctx.lineWidth = 4;           // stroke width in pixels
ctx.lineCap = 'round';       // butt | round | square
ctx.lineJoin = 'round';      // miter | round | bevel
ctx.setLineDash([5, 3]);     // dashed line: 5px dash, 3px gap
ctx.globalAlpha = 0.8;       // transparency for all drawing
ctx.globalCompositeOperation = 'multiply'; // blend modes

Адаптивный canvas HiDPI

Устраните размытость canvas на дисплеях Retina/HiDPI:

function setupHiDPI(canvas, width, height) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);  // scale all drawing
  return ctx;
}

Canvas и SVG

Когда выбирать canvas, а когда SVG:

  • Canvas — растровый, обрабатывается попиксельно, подходит для игр, визуализации больших объёмов данных и обработки изображений
  • SVG — векторный, масштабируемый, подходит для логотипов, значков, диаграмм с интерактивными элементами и специальных возможностей

Доступность canvas

У canvas нет встроенной поддержки доступности — добавляйте её вручную:

<canvas
  id="chart"
  width="800"
  height="400"
  aria-label="Bar chart showing Q1-Q4 revenue growth"
  role="img"
>
  <!-- Fallback for non-canvas browsers and screen readers -->
  <table><!-- accessible data table --></table>
</canvas>

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

Как правильно получить контекст рисования canvas?

Итоги: настройка canvas

Основные сведения о настройке canvas:

  • Задавайте ширину и высоту через атрибуты HTML, а не CSS
  • canvas.getContext('2d') — получение контекста рисования
  • Начало координат находится в левом верхнем углу (0,0); x→вправо, y→вниз
  • ctx.save() / ctx.restore() — управление состоянием на основе стека
  • Масштабируйте с учётом devicePixelRatio для чёткого отображения на Retina

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

Урок «Настройка canvas и двумерного контекста» бесплатный?

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

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

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

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

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

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

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

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

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

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

  1. Настройка canvas и двумерного контекста
  2. Рисование прямоугольников и контуров
  3. Текст и изображения на canvas
  4. Анимация с помощью requestAnimationFrame
← Назад к HTML Academy