Тег <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-класс
contenteditable Редактируемость
data-* Пользовательские данные
dir Направление текста
hidden Скрытие
id Идентификатор
lang Язык
spellcheck Проверка орфографии
style Инлайновые стили
tabindex Порядок перехода
title Подсказка
translate Перевод

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