Общие сведения об HTML-объявлениях на холсте

Natalia Markoborodova

HTML-in-Canvas API позволяет объединить интерактивность и доступность DOM с высокой производительностью и контролем на уровне пикселей, которые обеспечивает <canvas>. API позволяет рисовать живые поддеревья DOM непосредственно в контекстах холста 2D, WebGL или WebGPU, в то время как браузер сохраняет интерактивность, деревья специальных возможностей и интеграцию на уровне браузера.

Видеообзор HTML-in-Canvas API

Чтобы узнать о преимуществах HTML-in-Canvas, о том, как эта функция улучшает предыдущие обходные решения, и о том, для каких сценариев использования она лучше всего подходит, прочитайте статью HTML-in-Canvas в Chrome 157: интерактивная DOM в 2D, WebGL и WebGPU.

Как реализовать пользовательский интерфейс с помощью HTML-in-Canvas

Чтобы интегрировать HTML-in-Canvas в приложение, вы можете:

  • Создайте прямую реализацию с помощью API браузера.
  • Используйте фреймворк, поддерживающий HTML-in-Canvas.

Вы также можете использовать агента для программирования. Узнайте, как улучшить работу агента по программированию с помощью Modern Web Guidance.

Прямая реализация

Реализация зависит от контекста, в котором вы работаете. Прежде чем начать, ознакомьтесь с техническими понятиями, которые используются во всех контекстах, например контент drawable и событие paint.

Узнайте, как нарисовать изображение элемента на холсте и обновить геометрию элемента для следующих контекстов:

Поддержка библиотек и фреймворков

В нескольких популярных библиотеках добавлена экспериментальная поддержка HTML-in-Canvas для текстур WebGL и WebGPU, а также эффектов 2D-холста. Информацию о текущем статусе поддержки и особенностях реализации можно найти в документации к каждой библиотеке.

Three.js

Обновление матриц вручную может быть утомительным, поэтому фреймворки добавляют встроенную поддержку. Например, в Three.js есть экспериментальная поддержка с использованием THREE.HTMLTexture:

const material = new THREE.MeshBasicMaterial();
material.map = new THREE.HTMLTexture(uiElement); // Pass the DOM element

const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

PlayCanvas

PlayCanvas также поддерживает HTML-in-Canvas с помощью Texture API:

// Wait for the 'paint' event to set the source
canvas.addEventListener('paint', () => {
  htmlTexture.setSource(htmlElement);
}, { once: true });
canvas.requestPaint();

// Keep up to date
canvas.addEventListener('paint', onPaintUpload);

const material = new pc.StandardMaterial();
material.diffuseMap = htmlTexture;
material.update();

Babylon.js

Babylon.js поддерживает HTML-in-Canvas через класс BABYLON.HtmlTexture:

// 2. Wrap the DOM element in an HtmlTexture
const htmlTexture = new BABYLON.HtmlTexture("htmlTexture", uiElement, scene);

// 3. Assign the texture to a material
const material = new BABYLON.StandardMaterial("hudMaterial", scene);
material.diffuseTexture = htmlTexture;

// 4. Apply material to 3D mesh
const plane = BABYLON.MeshBuilder.CreatePlane("hudPlane", { width: 1.6, height: 0.9 }, scene);
plane.material = material;

// 5. Start Render Loop
engine.runRenderLoop(() => {
  scene.render();
});

PixiJS

В PixiJS добавлена поддержка HTML-in-Canvas в v8.19.0:

import { HTMLSource } from 'pixi.js/html-source';

// ... Initialize the app

// Append the HTML element as a direct child of the Pixi canvas
app.canvas.appendChild(htmlElement);

// Create the HTML-in-Canvas source and wrap it in a Sprite
const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
app.stage.addChild(sprite);

app.ticker.add(() => {
  // Make sure to align the HTML element by updating its transform
  const syncT = app.canvas.getElementTransform(htmlElement, finalTransform);
  if (syncT) {
    htmlElement.style.transform = syncT.toString();
  }
});

CanvasUI

CanvasUI – это библиотека компонентов интерфейса с открытым исходным кодом, в которой используется HTML-in-Canvas.

Как реализовать HTML-in-Canvas с помощью агента программирования

Если вы используете агента по программированию, установите Modern Web Guidance, где есть последние инструкции по реализации HTML-in-Canvas. Помимо HTML-in-Canvas, Modern Web Guidance охватывает другие современные API браузеров и рекомендации.

Дальнейшие действия