Урок 10 · Слайд 1
🖼️

Что такое Canvas?

Холст для рисования прямо в браузере

script.js
// Получаем canvas и контекст рисования
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Теперь можем рисовать!
ctx.fillStyle = '#e91e63';
ctx.fillRect(10, 10, 100, 50); // x,y,ширина,высота
📖 Словарик
Canvas
HTML-элемент для рисования 2D и 3D графики через JavaScript.
"Canvas — холст для игр и визуализаций"
context (ctx)
Объект с методами для рисования на Canvas.
"canvas.getContext('2d') даёт 2D-контекст"
Система координат
x — слева направо, y — сверху вниз. (0,0) — левый верхний угол.
"fillRect(10, 10, ...) — начало в 10px от левого и верхнего края"
Урок 10 · Слайд 2
🔷

Основные фигуры

Прямоугольники, круги, линии

script.js
// Прямоугольник (заливка)
ctx.fillStyle = '#e91e63';
ctx.fillRect(20, 20, 100, 60);

// Прямоугольник (рамка)
ctx.strokeStyle = '#9c27b0';
ctx.lineWidth = 3;
ctx.strokeRect(140, 20, 100, 60);

// Круг (arc = дуга)
ctx.beginPath();
ctx.arc(320, 50, 40, 0, Math.PI * 2);
ctx.fillStyle = '#ff5722';
ctx.fill();

// Линия
ctx.beginPath();
ctx.moveTo(20, 120);
ctx.lineTo(380, 120);
ctx.stroke();
📖 Словарик
fillRect(x, y, w, h)
Рисует закрашенный прямоугольник.
"fillRect(0, 0, 100, 50) — прямоугольник в углу"
arc(x, y, r, start, end)
Рисует дугу или круг.
"arc(100, 100, 50, 0, Math.PI*2) — полный круг"
beginPath()
Начинает новый путь для рисования.
"beginPath() перед каждым новым контуром!"
Урок 10 · Слайд 3
🌈

Цвета и градиенты

Делаем рисунок красочным

script.js
// Цвет заливки и контура
ctx.fillStyle = '#e91e63'; // HEX
ctx.fillStyle = 'rgba(233, 30, 99, 0.5)'; // полупрозрачный

// Линейный градиент
const grad = ctx.createLinearGradient(0, 0, 400, 0);
grad.addColorStop(0, '#e91e63');
grad.addColorStop(0.5, '#9c27b0');
grad.addColorStop(1, '#3f51b5');

ctx.fillStyle = grad;
ctx.fillRect(0, 50, 400, 80);

// Прозрачность всего объекта
ctx.globalAlpha = 0.7; // 0 = прозрачный, 1 = непрозрачный
📖 Словарик
fillStyle
Цвет или стиль заливки фигур.
"ctx.fillStyle = '#ff0000' — красная заливка"
createLinearGradient
Создаёт линейный градиент от одной точки до другой.
"Градиент от розового до синего слева направо"
rgba()
Цвет с каналом прозрачности (Alpha: 0-1).
"rgba(255,0,0, 0.5) — полупрозрачный красный"
Урок 10 · Слайд 4
✍️

Текст на Canvas

Пишем надписи прямо на холсте

script.js
// Настраиваем шрифт
ctx.font = 'bold 36px Arial';
ctx.fillStyle = '#e91e63';
ctx.textAlign = 'center'; // left, right, center
ctx.textBaseline = 'middle';

// Рисуем закрашенный текст
ctx.fillText('Привет, Canvas!', 200, 75);

// Текст только контуром
ctx.strokeStyle = '#9c27b0';
ctx.lineWidth = 2;
ctx.strokeText('Контур!', 200, 130);

// Измерить ширину текста
const метрики = ctx.measureText('Текст');
console.log(метрики.width); // ширина в пикселях
📖 Словарик
ctx.font
Устанавливает шрифт для текста: размер и семейство.
"'bold 24px Nunito' — жирный шрифт 24px"
fillText(текст, x, y)
Рисует закрашенный текст в указанной точке.
"fillText('Счёт: 10', 200, 30) — надпись счёта"
textAlign
Горизонтальное выравнивание текста относительно x.
"center — текст центрируется по указанной точке"
Урок 10 · Слайд 5
🎬

Анимация: requestAnimationFrame

Плавное движение объектов

script.js — прыгающий мяч
let x = 200, y = 150;
let dx = 3, dy = 3; // скорость

function анимация() {
  // Очищаем холст
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Рисуем мяч
  ctx.beginPath();
  ctx.arc(x, y, 20, 0, Math.PI * 2);
  ctx.fillStyle = '#e91e63';
  ctx.fill();
  
  // Двигаем и отражаем от стен
  x += dx; y += dy;
  if (x > canvas.width - 20 || x < 20) dx = -dx;
  if (y > canvas.height - 20 || y < 20) dy = -dy;
  
  requestAnimationFrame(анимация); // следующий кадр
}
анимация(); // запускаем!
📖 Словарик
requestAnimationFrame
Вызывает функцию перед следующим кадром (~60 раз в секунду).
"rAF синхронизирует анимацию с монитором"
clearRect()
Очищает прямоугольную область холста.
"clearRect(0,0,w,h) очищает весь холст"
Game loop
Бесконечный цикл: очистить → нарисовать → обновить → повторить.
"Все игры работают по принципу game loop"
Урок 10 · Слайд 6
🖱️

Обработка мыши на Canvas

Рисуем когда пользователь ведёт мышкой

script.js — рисовалка
let рисую = false;

canvas.addEventListener('mousedown', () => рисую = true);
canvas.addEventListener('mouseup', () => рисую = false);
canvas.addEventListener('mouseout', () => рисую = false);

canvas.addEventListener('mousemove', (e) => {
  if (!рисую) return;
  
  // Координаты относительно canvas
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  ctx.fillStyle = '#e91e63';
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, Math.PI * 2);
  ctx.fill();
});
📖 Словарик
mousedown / mouseup
События нажатия и отпускания кнопки мыши.
"mousedown начинает рисование, mouseup — заканчивает"
getBoundingClientRect()
Возвращает позицию элемента на странице.
"Нужен чтобы считать координаты относительно canvas"
e.clientX / e.clientY
Координаты мыши на экране в пикселях.
"clientX - rect.left = x внутри canvas"
Урок 10 · Слайд 7
🎨

Мини-проект: нарисуй что-нибудь!

Создай рисовалку с разными кистями

1
Создай HTML с canvas (600×400) и панелью инструментов
2
Добавь рисование мышкой (mousedown + mousemove)
3
Добавь выбор цвета через <input type="color">
4
Добавь слайдер размера кисти через <input type="range">
5
Кнопка "Очистить" — ctx.clearRect(0, 0, w, h)
6
Кнопка "Сохранить" — canvas.toDataURL() + скачать 🏆