Работа с canvas

Bliss.js предоставляет удобный интерфейс для работы с HTML5 canvas, упрощая создание графики, анимаций и интерактивных визуальных элементов. В основе лежит стандартный <canvas> элемент, к которому библиотека добавляет высокоуровневые методы и упрощённое управление контекстом рисования.

Инициализация canvas

Создание canvas в Bliss.js происходит с помощью функции Bliss.canvas(), которая автоматически создаёт элемент и возвращает объект с методами для работы с ним. Пример:

const canvas = Bliss.canvas({
    width: 800,
    height: 600,
    container: document.body
});

Ключевые параметры:

  • width и height — размеры холста в пикселях.
  • container — элемент DOM, в который будет помещён canvas.
  • background — опционально, задаёт фон холста, может быть цветом или градиентом.

Контекст рисования

Bliss.js скрывает прямую работу с контекстом (2d), предоставляя собственные методы для рисования:

canvas.rect(50, 50, 200, 100, { fill: 'red', stroke: 'black', lineWidth: 3 });
canvas.circle(400, 300, 75, { fill: 'blue', stroke: 'black' });
canvas.line(100, 100, 300, 300, { stroke: 'green', lineWidth: 2 });

Особенности методов:

  • rect(x, y, width, height, options) — прямоугольник с заливкой и обводкой.
  • circle(x, y, radius, options) — окружность с заливкой и обводкой.
  • line(x1, y1, x2, y2, options) — линия между двумя точками.
  • options может содержать свойства: fill, stroke, lineWidth, dash и другие параметры стиля.

Работа с цветами и градиентами

Bliss.js поддерживает как простые цвета, так и линейные и радиальные градиенты:

const gradient = canvas.createLinearGradient(0, 0, 800, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'yellow');

canvas.rect(50, 200, 700, 100, { fill: gradient });

Для радиального градиента используется метод createRadialGradient(x0, y0, r0, x1, y1, r1).

Текст на canvas

Рисование текста в Bliss.js выполняется через метод text():

canvas.text("Bliss.js Canvas", 400, 50, {
    font: "30px Arial",
    fill: "black",
    align: "center",
    baseline: "middle"
});

Параметры:

  • font — стиль шрифта, совместимый с CSS.
  • fill — цвет текста.
  • align — выравнивание текста (left, center, right).
  • baseline — базовая линия (top, middle, bottom).

Анимация и обновление кадра

Bliss.js интегрирует управление анимацией с помощью метода animate(callback):

let x = 0;
canvas.animate(() => {
    canvas.clear();
    canvas.circle(x, 300, 50, { fill: 'purple' });
    x += 2;
    if (x > canvas.width) x = 0;
});

Принцип работы:

  • animate вызывает callback на каждом кадре.
  • canvas.clear() очищает холст перед новым рендером.
  • Поддерживается плавная анимация благодаря встроенному requestAnimationFrame.

События мыши и интерактивность

Bliss.js позволяет легко добавлять обработчики событий на canvas:

canvas.on('click', (event) => {
    const { x, y } = event;
    canvas.circle(x, y, 20, { fill: 'orange' });
});

Доступные события: click, mousemove, mousedown, mouseup, mouseenter, mouseleave. Объект события содержит координаты мыши относительно canvas (x, y), что упрощает обработку взаимодействия.

Работа с изображениями

Bliss.js поддерживает загрузку и отрисовку изображений:

const img = new Image();
img.src = 'image.png';
img.onl oad = () => {
    canvas.image(img, 100, 100, 200, 150);
};

Метод image(img, x, y, width, height) позволяет масштабировать изображение при отрисовке. Также поддерживаются эффекты прозрачности через alpha в опциях.

Масштабирование, вращение и трансформации

Bliss.js предоставляет методы для работы с трансформациями:

canvas.save();
canvas.translate(400, 300);
canvas.rotate(Math.PI / 4);
canvas.rect(-50, -50, 100, 100, { fill: 'green' });
canvas.restore();

Обязательные моменты:

  • save() и restore() сохраняют и восстанавливают состояние контекста.
  • translate(x, y) смещает систему координат.
  • rotate(angle) поворачивает систему координат.
  • scale(sx, sy) изменяет масштаб объектов.

Слои и управление z-index

Bliss.js позволяет создавать несколько canvas-слоев для сложных визуальных эффектов:

const background = Bliss.canvas({ width: 800, height: 600, container: document.body });
const foreground = Bliss.canvas({ width: 800, height: 600, container: document.body });

background.rect(0, 0, 800, 600, { fill: 'lightblue' });
foreground.text("Foreground Text", 400, 300, { font: '40px Arial', fill: 'white' });

Слои можно накладывать друг на друга, управлять прозрачностью и видимостью через style.opacity и style.display.

Работа с пикселями

Bliss.js предоставляет доступ к пиксельным данным через getImageData() и putImageData():

const data = canvas.getImageData(50, 50, 100, 100);
for (let i = 0; i < data.data.length; i += 4) {
    data.data[i] = 255 - data.data[i]; // инверсия красного канала
}
canvas.putImageData(data, 50, 50);

Принцип работы:

  • getImageData(x, y, width, height) возвращает объект с массивом RGBA.
  • putImageData(data, x, y) обновляет область canvas.
  • Позволяет создавать фильтры, манипулировать изображениями на пиксельном уровне.

Встроенные утилиты

Bliss.js содержит полезные утилиты для ускорения работы с canvas:

  • canvas.clear(color) — очистка холста с заливкой цветом.
  • canvas.randomColor() — генерация случайного цвета.
  • canvas.distance(x1, y1, x2, y2) — вычисление расстояния между точками.
  • canvas.centerX() и canvas.centerY() — получение координат центра холста.

Эти функции позволяют ускорить написание кода и делают его более читабельным.

Bliss.js сочетает мощь нативного canvas с удобным высокоуровневым API, что делает библиотеку эффективным инструментом для интерактивной графики и анимации в веб-приложениях. Сочетание простых методов рисования, трансформаций, работы с изображениями и событий обеспечивает гибкость при создании любых визуальных интерфейсов.

Оглавление