Тег <canvas>

Описание

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

Базовое использование:
<canvas id="myCanvas" width="300" height="150"> Ваш браузер не поддерживает canvas. </canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(10, 10, 100, 50); </script>
Рисование фигур:
<canvas id="drawCanvas" width="400" height="200"></canvas> <script> const canvas = document.getElementById('drawCanvas'); const ctx = canvas.getContext('2d'); // Рисуем круг ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.stroke(); // Рисуем текст ctx.font = '20px Arial'; ctx.fillText('Пример Canvas', 180, 100); </script>
Анимация:
<canvas id="animCanvas" width="300" height="150"></canvas> <script> const canvas = document.getElementById('animCanvas'); const ctx = canvas.getContext('2d'); let x = 0; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(x, 50, 50, 50); x += 1; if (x > 250) x = 0; requestAnimationFrame(animate); } animate(); </script>

Ключевые особенности:

  • Требует JavaScript для работы
  • Поддерживает 2D и 3D-рендеринг (WebGL)
  • Атрибуты width/height определяют размеры холста
  • Содержимое внутри тега отображается при отсутствии поддержки
  • Можно сохранить изображение с холста (toDataURL)

Основные методы 2D-контекста:

  • fillRect(), strokeRect() - прямоугольники
  • beginPath(), stroke() - пути и линии
  • arc() - круги и дуги
  • drawImage() - отрисовка изображений

Тег <canvas> открывает широкие возможности для создания интерактивной графики прямо в браузере.

Атрибуты

height Высота
width Ширина
accesskey Горячая клавиша
class CSS-класс
data-* Пользовательские данные
hidden Скрытие
id Идентификатор
style Инлайновые стили
tabindex Порядок перехода
title Подсказка

Поддержка браузерами
9.0 6.0 9.6 4.0 3.1