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

PixiJS предоставляет мощный и гибкий механизм работы с графикой через WebGL и Canvas. Одним из центральных понятий при создании и кастомизации графики является контекст рисования (context), который используется для низкоуровневого доступа к API Canvas и WebGL.

Основы контекста рисования

Контекст в PixiJS — это объект, через который происходит непосредственное взаимодействие с графическим API. Для CanvasRenderer контекст соответствует объекту CanvasRenderingContext2D, а для WebGLRenderer — объекту WebGLRenderingContext. Через него можно напрямую выполнять операции отрисовки, манипулировать пикселями и применять кастомные шейдеры.

Пример создания канвы и получения контекста:

const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

const ctx = app.renderer.plugins.extract.canvas(app.stage).getContext('2d');

В этом примере ctx — это стандартный 2D-контекст Canvas. Через него можно использовать привычные методы fillRect, strokeRect, drawImage и другие.

Метод context у графических объектов

В PixiJS графические объекты, такие как PIXI.Graphics, предоставляют метод context, который используется для создания или модификации низкоуровневого контекста рисования при отрисовке примитивов.

Пример использования метода context:

const graphics = new PIXI.Graphics();

graphics.context((ctx) => {
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 200, 100);

    ctx.strokeStyle = 'red';
    ctx.lineWidth = 5;
    ctx.strokeRect(50, 50, 200, 100);
});

app.stage.addChild(graphics);

В этом коде метод context получает коллбек с объектом контекста ctx. Все изменения внутри функции применяются при рендеринге этого графического объекта.

Ключевые возможности метода context:

  • Настройка цветов заливки и обводки (fillStyle, strokeStyle)
  • Манипуляции с линиями (lineWidth, lineCap, lineJoin)
  • Использование градиентов и паттернов (createLinearGradient, createPattern)
  • Прямое рисование изображений и текстов (drawImage, fillText)

Работа с трансформациями и состоянием контекста

Метод context позволяет использовать стандартные Canvas API методы сохранения и восстановления состояния:

graphics.context((ctx) => {
    ctx.save();
    ctx.translate(100, 100);
    ctx.rotate(Math.PI / 4);
    ctx.fillStyle = 'green';
    ctx.fillRect(0, 0, 100, 50);
    ctx.restore();
});

Здесь save() и restore() помогают изолировать трансформации и стиль от других частей сцены. Это особенно важно при сложных сценах с множеством объектов и анимаций.

Использование контекста для текстур и шейдеров

Метод context не ограничивается стандартной отрисовкой. Через него можно создавать текстуры на лету и использовать их для спрайтов:

const graphics = new PIXI.Graphics();
graphics.context((ctx) => {
    ctx.fillStyle = 'orange';
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2);
    ctx.fill();
});

const texture = PIXI.Texture.from(graphics.generateCanvasTexture());
const sprite = new PIXI.Sprite(texture);
app.stage.addChild(sprite);

Такой подход позволяет интегрировать Canvas API с PixiJS спрайтами и использовать преимущества GPU при WebGL рендеринге.

Отличия работы с Canvas и WebGL

  • CanvasRenderer: метод context предоставляет прямой доступ к CanvasRenderingContext2D. Все методы и свойства стандартного Canvas доступны без ограничений.
  • WebGLRenderer: метод context обрабатывается через промежуточный слой, и не все Canvas методы напрямую поддерживаются. Основное применение — создание текстур и шейдеров через пиксельные данные.

Советы по оптимизации

  • Не использовать context для каждой отрисовки динамических объектов, так как это может замедлить рендеринг.
  • Создавать текстуры через generateCanvasTexture один раз и переиспользовать их для спрайтов.
  • Использовать save() и restore() для изоляции состояния, чтобы не влиять на другие объекты сцены.
  • Для сложных шейдеров и фильтров лучше комбинировать context с фильтрами PixiJS (PIXI.Filter) для более эффективного GPU рендеринга.

Применение в анимации

Контекст отлично подходит для создания кастомных анимаций, когда необходимо изменять пиксельные данные вручную:

let t = 0;
app.ticker.add(() => {
    graphics.clear();
    graphics.context((ctx) => {
        ctx.fillStyle = `rgb(${Math.sin(t) * 128 + 128}, 50, 200)`;
        ctx.fillRect(0, 0, 200, 100);
    });
    t += 0.05;
});

В этом примере цвет заливки плавно меняется со временем, создавая эффект анимации без необходимости создавать новые графические объекты на каждом кадре.

Метод context в PixiJS предоставляет мощный инструмент для интеграции низкоуровневой отрисовки в высокоуровневую сцену, сочетая удобство Canvas API с производительностью WebGL. Его использование открывает широкие возможности для кастомных эффектов, динамических текстур и точного контроля за визуальным отображением.

Оглавление