20. Canvas Drawing

HTML: Скелет - Canvas Drawing

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

Что такое Canvas?

Canvas — это область на веб-странице, которая служит холстом для рисования. Сам по себе элемент <canvas> ничего не отображает. Вся отрисовка производится с помощью JavaScript, который управляет пикселями внутри холста. Представьте себе пустой лист бумаги, на котором вы можете рисовать все, что угодно, используя кисти и краски (в нашем случае — JavaScript).

Основы использования Canvas

Для начала, добавим элемент <canvas> в нашу HTML-страницу:

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Example</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
  <script>
    // JavaScript код для рисования
  </script>
</body>
</html>

Здесь мы создали элемент <canvas> с id “myCanvas”, установили его ширину (width) в 200 пикселей и высоту (height) в 100 пикселей. Атрибут style добавляет границу для лучшей видимости.

Теперь давайте нарисуем что-нибудь на нашем холсте с помощью JavaScript:

// Получаем элемент canvas
const canvas = document.getElementById("myCanvas");

// Получаем контекст рисования (2D)
const ctx = canvas.getContext("2d");

// Устанавливаем цвет заливки
ctx.fillStyle = "green";

// Рисуем прямоугольник
ctx.fillRect(10, 10, 150, 80); // x, y, width, height

В этом коде мы сначала получаем доступ к элементу <canvas> по его id. Затем мы получаем контекст рисования — объект, который предоставляет методы для рисования на холсте. Мы выбрали контекст “2d”, который позволяет рисовать двухмерную графику. Затем мы устанавливаем цвет заливки (fillStyle) на зеленый и рисуем прямоугольник с помощью метода fillRect(). Параметры fillRect() определяют координаты верхнего левого угла прямоугольника (x, y), его ширину и высоту.

Другие примеры рисования

Вот еще несколько примеров:

// Рисование линии
ctx.beginPath(); // Начинаем новый путь
ctx.moveTo(20, 20); // Перемещаем "кисть" в точку (20, 20)
ctx.lineTo(180, 80); // Рисуем линию до точки (180, 80)
ctx.strokeStyle = "blue"; // Устанавливаем цвет линии
ctx.stroke(); // Обводим линию

// Рисование круга
ctx.beginPath();
ctx.arc(100, 50, 30, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
ctx.fillStyle = "red";
ctx.fill(); // Заливаем круг

В этих примерах мы используем beginPath() для начала нового пути, moveTo() для перемещения “кисти” в начальную точку, lineTo() для рисования линии, strokeStyle для установки цвета линии, stroke() для обводки линии, arc() для рисования дуги (в данном случае — круга), и fill() для заливки фигуры.

Жизненный пример

Canvas широко используется в веб-разработке.

Графики и диаграммы: Многие библиотеки, такие как Chart.js, используют Canvas для отрисовки сложных графиков.
Игры: Canvas является основой для создания 2D-игр в браузере. Фреймворки, такие как Phaser, используют Canvas для отрисовки игровых объектов и анимаций.
Редакторы изображений: Онлайн редакторы изображений часто используют Canvas для манипулирования пикселями и применения фильтров.
Интерактивные визуализации данных: Canvas позволяет создавать пользовательские визуализации, реагирующие на действия пользователя.

Ключевые моменты

Canvas — это элемент HTML, который служит холстом для рисования.
Отрисовка на Canvas выполняется с помощью JavaScript.
Необходимо получить контекст рисования (например, “2d”) для доступа к методам рисования.
Canvas используется для создания интерактивных визуализаций, игр и многого другого.
fillRect(), lineTo(), arc(), fill(), stroke() – лишь некоторые из основных методов для рисования.