Canvas API: рисование 2D-графики

🎨 Встречайте: холст для вашего творчества

Canvas API — это ваш цифровой мольберт в браузере. ✨ С его помощью можно рисовать графики, создавать анимации, игры и даже обрабатывать изображения. Всё это — с помощью JavaScript и парочки методов!

Начнём с основ.

🛠️ Подготовка холста

Прежде чем рисовать, нужно подготовить место для творчества.

1. Добавляем <canvas> в HTML:

<canvas id="myCanvas" width="500" height="300"></canvas>

width и height задают размеры холста. Если их не указать, по умолчанию будет 300×150 пикселей.

2. Получаем контекст рисования:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // '2d' — указываем, что работаем с 2D-графикой

Теперь ctx — это ваш инструмент для рисования.

🖌️ Основные методы рисования

🔷 Рисуем прямоугольник

Самый простой способ что-то нарисовать — использовать fillRect().

ctx.fillStyle = 'tomato'; // Задаём цвет заливки  
ctx.fillRect(50, 50, 100, 80); // x, y, width, height

fillStyle — цвет или градиент заливки.
fillRect() — рисует закрашенный прямоугольник.

💡 Есть ещё strokeRect() — рисует только контур.

🟢 Рисуем линии

Линии в Canvas — это последовательность точек (moveTo, lineTo) и команда отрисовки (stroke).

ctx.beginPath(); // Начинаем новый путь  
ctx.moveTo(10, 10); // Ставим перо в точку (10, 10)  
ctx.lineTo(200, 100); // Рисуем линию до (200, 100)  
ctx.strokeStyle = 'blue'; // Цвет линии  
ctx.lineWidth = 3; // Толщина линии  
ctx.stroke(); // Отрисовываем линию

🔵 Рисуем окружность

Окружность — это частный случай дуги (arc).

ctx.beginPath();  
ctx.arc(150, 150, 50, 0, Math.PI * 2); // x, y, радиус, начальный угол, конечный угол  
ctx.fillStyle = 'gold';  
ctx.fill();

🔥 Math.PI * 2 — это полный круг (360°).

🌈 Работа с цветами и градиентами

🎨 Градиенты (`createLinearGradient`, `createRadialGradient`)

const gradient = ctx.createLinearGradient(0, 0, 200, 0); // x1, y1, x2, y2  
gradient.addColorStop(0, 'red'); // Начало градиента  
gradient.addColorStop(1, 'blue'); // Конец градиента  

ctx.fillStyle = gradient;  
ctx.fillRect(10, 10, 200, 100);

🔳 Прозрачность (`globalAlpha`)

ctx.globalAlpha = 0.5; // Прозрачность от 0 (полностью прозрачный) до 1 (непрозрачный)  
ctx.fillRect(50, 50, 100, 100);

✨ Анимация в Canvas

Canvas оживает, когда мы обновляем его в цикле (requestAnimationFrame).

let x = 0;  

function draw() {  
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Очищаем холст  
  ctx.fillRect(x, 50, 50, 50);  
  x += 2;  
  if (x > canvas.width) x = 0;  
  requestAnimationFrame(draw);  
}  

draw();

📊 Рисуем графики

Canvas идеально подходит для визуализации данных.

const data = [30, 80, 45, 120, 65];  

ctx.fillStyle = 'steelblue';  

data.forEach((value, index) => {  
  const barWidth = 30;  
  const barX = 50 + index * 50;  
  const barHeight = value;  
  ctx.fillRect(barX, canvas.height - barHeight, barWidth, barHeight);  
});

🔥 Продвинутые техники

🖼️ Работа с изображениями (`drawImage`)

const img = new Image();  
img.src = 'image.jpg';  

img.onload = function() {  
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);  
};

✏️ Текст (`fillText`, `strokeText`)

ctx.font = '20px Arial';  
ctx.fillStyle = 'black';  
ctx.fillText('Привет, Canvas!', 50, 50);

🚀 Что дальше?

Canvas — это мощный инструмент, и мы лишь слегка поцарапали поверхность.

Изучите transform() для вращения и масштабирования.
Попробуйте clip() для сложных обрезок.
Поиграйте с пикселями через ImageData.

Теперь берите код и экспериментируйте! 🚀