Из чего состоит холст

Из чего состоит холст?

Canvas (холст) — это HTML элемент, который предоставляет API для рисования графики, анимаций и интерактивных элементов прямо в браузере. Это низкоуровневый инструмент для создания пиксельной графики.

Структура Canvas API

1. HTML элемент Canvas

Всё начинается с элемента, который выступает контейнером для графики:

<canvas id="myCanvas" width="800" height="600"></canvas>

Важные атрибуты:

• width — ширина холста в пикселях (по умолчанию 300)
• height — высота холста в пикселях (по умолчанию 150)
• id — идентификатор для доступа из JavaScript

2. Контекст (Context)

Для рисования на canvas нужен контекст — объект, который содержит методы и свойства для рисования:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');  // 2D контекст

// Также существует '3d' (WebGL), но используется реже
const ctx3d = canvas.getContext('webgl');

2D контекст — самый популярный для 2D графики, анимаций и игр.

3. Система координат

Holst использует координатную систему, где:

• (0, 0) — верхний левый угол
• X растёт слева направо
• Y растёт сверху вниз
• Единица измерения — пиксель

(0,0) ----------> X
  |  
  |
  v
  Y

Основные компоненты Canvas API

1. Примитивные фигуры

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

// Прямоугольник
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);  // x, y, width, height
ctx.strokeStyle = 'black';
ctx.strokeRect(10, 10, 100, 100);

// Очистка области
ctx.clearRect(10, 10, 100, 100);

2. Пути (Paths)

Пути позволяют рисовать произвольные фигуры:

ctx.beginPath();  // Начало нового пути
ctx.moveTo(50, 50);  // Переместить "кисть" на координату
ctx.lineTo(150, 150);  // Нарисовать линию
ctx.lineTo(250, 50);
ctx.closePath();  // Закрыть путь (соединить с началом)
ctx.stroke();  // Обвести путь
ctx.fill();  // Закрасить путь

3. Окружности и дуги

ctx.beginPath();
ctx.arc(
  100, 100,  // центр (x, y)
  50,        // радиус
  0,         // начальный угол (в радианах)
  Math.PI * 2  // конечный угол (полный круг)
);
ctx.fill();

4. Текст

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText('Привет, холст!', 100, 50);

5. Изображения

const img = new Image();
img.src = '/image.jpg';
img.onload = () => {
  ctx.drawImage(img, 10, 10, 100, 100);  // x, y, width, height
};

6. Трансформации

// Сдвиг
ctx.translate(100, 100);

// Поворот (в радианах)
ctx.rotate(Math.PI / 4);

// Масштабирование
ctx.scale(2, 2);

// Сохранить и восстановить состояние
ctx.save();  // Сохранить текущее состояние
ctx.restore();  // Восстановить последнее сохранённое состояние

7. Стили и свойства

// Цвет заполнения
ctx.fillStyle = '#FF0000';  // Hex
ctx.fillStyle = 'rgb(255, 0, 0)';  // RGB
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';  // RGBA

// Цвет обводки
ctx.strokeStyle = 'black';

// Толщина линии
ctx.lineWidth = 3;

// Стиль окончания линии
ctx.lineCap = 'round';  // 'butt', 'round', 'square'

// Стиль соединения линий
ctx.lineJoin = 'round';  // 'miter', 'bevel', 'round'

// Прозрачность
ctx.globalAlpha = 0.5;

Практический пример: рисование движущегося квадрата

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

let x = 0;
const speed = 2;

function animate() {
  // Очистить холст
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Нарисовать квадрат
  ctx.fillStyle = 'blue';
  ctx.fillRect(x, 50, 50, 50);
  
  // Обновить позицию
  x += speed;
  
  // Перезапустить при достижении конца
  if (x > canvas.width) {
    x = 0;
  }
  
  // Следующий кадр
  requestAnimationFrame(animate);
}

animate();

Выводы

Holst состоит из:

• HTML элемента с заданными шириной и высотой
• 2D контекста, содержащего методы и свойства для рисования
• Системы координат (0,0 в верхнем левом углу)
• Примитивных фигур (прямоугольники, окружности, пути)
• Свойств стилизации (цвета, толщина линий, трансформации)

Это мощный инструмент для создания игр, графических редакторов, анимаций и интерактивных приложений в браузере.