Работа с графикой: тег <canvas> (в связке с JS), тег <svg> для векторной графики

Введение в HTML-графику: Canvas и SVG

HTML — это не только текст и ссылки. Современные технологии позволяют создавать потрясающую графику прямо в браузере! Сегодня мы разберём два мощных инструмента:

1. <canvas> — растровая графика (пиксели + JavaScript)
2. <svg> — векторная графика (масштабируется без потерь)

Оба подхода имеют свои сильные стороны и идеальны для разных задач. Давайте разбираться!

Часть 1: Холст <canvas> — рисуем с JavaScript

Что такое Canvas?

Это HTML-элемент, который работает как холст художника. Вы рисуете на нём с помощью JavaScript, управляя каждым пикселем.

<canvas id="myCanvas" width="400" height="200"></canvas>

Основы работы

Чтобы начать рисовать: 1. Получаем контекст рисования (2d, webgl и др.) 2. Используем методы API для рисования

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Рисуем красный прямоугольник
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);

// Рисуем синий круг
ctx.beginPath();
ctx.arc(200, 100, 30, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();

Анимация на Canvas

Canvas особенно хорош для динамической графики. Пример простой анимации:

let x = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Очищаем холст
    ctx.fillRect(x, 50, 50, 50);
    x += 2;
    if (x > canvas.width) x = 0;
    requestAnimationFrame(animate); // Рекурсивный вызов для плавности
}
animate();

🔍 Когда использовать Canvas?
Идеально для: игр, сложных анимаций, графиков, обработки изображений.

Часть 2: Векторная графика с <svg>

Что такое SVG?

SVG (Scalable Vector Graphics) — это XML-формат для описания векторной графики. В отличие от Canvas, SVG сохраняет чёткость при любом масштабе!

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="green" />
</svg>

Преимущества SVG

• Масштабируется без потери качества
• Доступен для индексирования поисковиками
• Поддержка CSS-стилей и анимаций
• Можно редактировать в графических редакторах (например, Inkscape)

Пример сложного SVG

Создадим смайлик:

<svg width="200" height="200" viewBox="0 0 200 200">
    <!-- Голова -->
    <circle cx="100" cy="100" r="90" fill="yellow" stroke="black" stroke-width="2"/>

    <!-- Глаза -->
    <circle cx="60" cy="70" r="15" fill="white" stroke="black"/>
    <circle cx="140" cy="70" r="15" fill="white" stroke="black"/>

    <!-- Зрачки -->
    <circle cx="60" cy="70" r="7" fill="black"/>
    <circle cx="140" cy="70" r="7" fill="black"/>

    <!-- Рот -->
    <path d="M60 130 Q100 170 140 130" stroke="black" stroke-width="3" fill="none"/>
</svg>

🔍 Когда использовать SVG?
Идеально для: иконок, логотипов, иллюстраций, графиков, где важна чёткость.

Сравнение Canvas vs SVG

Практический пример: Анимированные часы

Canvas-версия:

function drawClock() {
    const now = new Date();
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Циферблат
    ctx.beginPath();
    ctx.arc(100, 100, 90, 0, Math.PI * 2);
    ctx.stroke();

    // Часы
    const hour = now.getHours() % 12;
    ctx.save();
    ctx.translate(100, 100);
    ctx.rotate(hour * Math.PI / 6);
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -50);
    ctx.stroke();
    ctx.restore();

    requestAnimationFrame(drawClock);
}
drawClock();

SVG-версия:

<svg width="200" height="200" viewBox="0 0 200 200">
    <circle cx="100" cy="100" r="90" fill="none" stroke="black"/>
    <line x1="100" y1="100" x2="100" y2="50" stroke="black" stroke-width="3"
          transform="rotate(30, 100, 100)"/>
</svg>

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

Canvas:

• Использование getImageData для обработки пикселей
• Оптимизация рисования через буферизацию
• Работа с библиотеками (например, Three.js для 3D)

SVG:

• Анимация через <animate>
• Фильтры (<filter> для эффектов)
• Использование viewBox для адаптивности

Итог

Теперь вы знаете два мощных подхода к созданию графики в браузере!

🎨 Canvas — ваш выбор, когда нужна:
- Высокая производительность
- Динамическая графика
- Пиксельные манипуляции

🖌️ SVG — идеален для:
- Масштабируемых иллюстраций
- Доступного контента
- CSS-анимаций

Попробуйте оба подхода в своём следующем проекте!