19. Canvas Introduction

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

Что такое Canvas?

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

Пример кода

<!DOCTYPE html>
<html>
<head>
<title>Canvas Пример</title>
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000"; // Красный цвет
ctx.fillRect(0, 0, 150, 75); // Рисуем прямоугольник
</script>

</body>
</html>

В этом примере:

Мы создали элемент <canvas> с id “myCanvas”, шириной 200 и высотой 100 пикселей.
style="border:1px solid #d3d3d3;" добавляет границу для лучшей видимости.
В JavaScript мы получаем доступ к элементу canvas и его 2D контексту (ctx).
ctx.fillStyle = "#FF0000"; устанавливает красный цвет заливки.
ctx.fillRect(0, 0, 150, 75); рисует прямоугольник, начиная с координат (0, 0), шириной 150 и высотой 75 пикселей.

Рисование различных фигур

Canvas позволяет рисовать различные фигуры, такие как линии, круги, прямоугольники и дуги.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Линия
ctx.beginPath();
ctx.moveTo(20, 20); // Начальная точка
ctx.lineTo(150, 100); // Конечная точка
ctx.stroke(); // Рисуем линию

// Круг
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI); // Координаты центра, радиус, начальный угол, конечный угол
ctx.stroke();

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

Canvas используется во многих реальных проектах:

Игры: Многие браузерные игры используют Canvas для отрисовки графики и анимации.
Визуализация данных: Canvas позволяет создавать интерактивные графики и диаграммы для представления данных. Например, библиотеки Chart.js и D3.js используют Canvas (или SVG) для визуализации данных.
Редакторы изображений: Некоторые онлайн-редакторы изображений используют Canvas для обработки и редактирования изображений.
Рекламные баннеры: Canvas часто используется для создания динамических и интерактивных рекламных баннеров.
Фреймворки: Некоторые JavaScript фреймворки, такие как PixiJS, используют Canvas для создания 2D-графики.

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

<canvas> - это HTML-элемент для рисования графики с помощью JavaScript.
Необходимо получить контекст рисования (например, “2d”) для работы с canvas.
Canvas позволяет рисовать различные фигуры, изображения и текст.
Canvas широко используется в играх, визуализации данных и других веб-приложениях.