Мультимедиа: canvas и SVG

Графика не обязана быть картинкой: её можно рисовать кодом. Canvas — пиксели и игры, SVG — векториконки и диаграммы, а видео встраивается без единого плагина.

Canvas: рисуем пиксели

Canvas — растровое полотно. Оно пустое; рисует его JavaScript: от простых фигур до анимаций и игр.

<canvas id="c" width="400" height="300"></canvas>

<script>
const ctx = document.getElementById("c").getContext("2d");

ctx.fillStyle = "#38bdf8";
ctx.fillRect(20, 20, 120, 80);       // прямоугольник

ctx.beginPath();
ctx.arc(240, 80, 50, 0, Math.PI * 2); // круг
ctx.fillStyle = "#818cf8";
ctx.fill();
</script>

SVG: графика, которая живет в разметке

SVG — вектор, хранится как XML, масштабируется без потери качества и стилизуется CSS. Идеал для иконок, логотипов и диаграмм.

<svg viewBox="0 0 100 100" width="120">
  <circle cx="30" cy="50" r="20" fill="var(--accent)"/>
  <rect x="55" y="30" width="30" height="40" rx="6" fill="#f472b6"/>
</svg>

Анимация на canvas

Главный цикл рисует кадр за кадром. requestAnimationFrame согласует отрисовку с частотой обновления монитора (60 FPS) и экономит батарею.

let x = 0;
function step() {
  ctx.clearRect(0, 0, 400, 300);
  ctx.fillStyle = "#facc15";
  ctx.fillRect(x, 100, 40, 40);
  x += 2;
  requestAnimationFrame(step); // следующий кадр
}
requestAnimationFrame(step);

Видео без плагинов

Тег <video> — почти всё. Форматы: MP4 (H.264) — максимум совместимости, WebM — полегче.

<video controls poster="preview.jpg" width="640">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Ваш браузер не умеет показывать видео.
</video>

<!-- атрибуты: autoplay, loop, muted, playsinline (мобильные) -->