Веб — Canvas 2D и WebGL

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику

В браузере графика — это Web API, отдельно от языка JavaScript. Два главных пути:

• Canvas 2D — команды "нарисуй фигуру"
• WebGL — треугольники и шейдеры на GPU

---

Canvas 2D

<canvas id="game" width="640" height="360"></canvas>

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

Атрибуты width и height задают размер буфера в пикселях, CSS только растягивает отображение.

Группы API

Группа	Методы	Задача
Прямоугольники	fillRect, clearRect	фон, стирание кадра
Пути	arc, lineTo, bezierCurveTo	фигуры
Стиль	fillStyle, globalAlpha	цвет, прозрачность
Текст	fillText, font	HUD, подписи
Картинки	drawImage	спрайты, тайлмапы
Трансформы	translate, rotate, scale	камера, спрайт
Состояние	save, restore	изоляция трансформаций

Модель Canvas

• браузер хранит только пиксели буфера, без списка объектов сцены
• каждый кадр — clearRect и отрисовка всего из модели
• ось Y вниз, (0,0) — левый верхний угол
• OffscreenCanvas — рендер в Web Worker
• willReadFrequently: true при частом getImageData

Полный синтаксис — Canvas 2D / JavaScript.

Код ITЗагрузка примера кода…

---

WebGL — ближе к GPU

const gl = canvas.getContext('webgl2');
if (!gl) alert('WebGL2 недоступен');

Canvas 2D	WebGL
команда "нарисуй круг"	загрузка вершин треугольников
растеризация через Skia	шейдеры на GPU
быстрый старт	выше потолок FPS и 3D

Минимальный пайплайн WebGL

1. Скомпилировать vertex и fragment shader (язык GLSL)
2. Создать program, привязать атрибуты
3. Загрузить VBO — Float32Array с координатами
4. gl.drawArrays(gl.TRIANGLES, 0, count)
5. Каждый кадр — clear и draw

Обёртки: Three.js, Babylon.js, regl, p5.js (режим WEBGL).

---

Стек в браузере

Ваш JS (update/render)
  → Canvas 2D API  или  WebGL API
  → Skia (2D)      или  ANGLE (GLES → D3D/Metal/Vulkan)
  → драйвер GPU
  → Compositor (слои video, canvas, DOM)
  → экран

Compositor — <canvas> часто отдельный слой: прокрутка страницы не перерисовывает игру целиком.

Подробнее — глава 10.

---

requestAnimationFrame

requestAnimationFrame (rAF) — браузерный callback перед следующей отрисовкой, синхронизированный с монитором.

let last = 0;
function loop(t) {
  const dt = Math.min((t - last) / 1000, 0.05);
  last = t;
  update(dt);
  render(ctx);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

	requestAnimationFrame	setInterval(16)
Синхронизация с монитором	да	нет
Пауза в фоновой вкладке	да	нет
Для игр	да	нет

См. буферизацию и игровой цикл.

---

DOM, SVG, CSS — когда Canvas не нужен

Технология	Модель	Подходит для
DOM + CSS	retained tree	UI, текст, вёрстка
SVG	вектор в DOM	иконки, диаграммы
Canvas	битмапа	игры, частицы
WebGL	GPU mesh	3D, тысячи спрайтов

Гибрид: меню на HTML, поле боя на <canvas> поверх.

---

Производительность

• один sprite sheet вместо сотен загрузок Image
• меньше drawImage с масштабированием каждый кадр
• тысячи объектов → WebGL instancing
• DevTools → Performance → Frames, GPU; вкладка Layers
• WebGL: расширение Spector.js — захват draw calls

Play ITЗагрузка интерактивного демо…

---

Связи

• High-Level API
• Графические API
• Буферизация
• DevTools