HTML-in-Canvas – Übersicht

Natalia Markoborodova

Die HTML-in-Canvas API schließt die Lücke zwischen der interaktiven und barrierefreien Welt des DOM und der leistungsstarken, pixelgenauen Steuerung von <canvas>. Mit der API können Sie Live-DOM-Unterbäume direkt in 2D-, WebGL- oder WebGPU-Canvas-Kontexte zeichnen. Dabei bleiben die Interaktivität, die Barrierefreiheitsbäume und die Integrationen auf Browserebene erhalten.

Videoübersicht zur HTML-in-Canvas API

Weitere Informationen zu den Vorteilen von HTML-in-Canvas, wie es frühere Problemumgehungen verbessert und für welche Anwendungsfälle es am besten geeignet ist, finden Sie unter HTML-in-Canvas in Chrome 157: Interaktives DOM in 2D, WebGL und WebGPU.

UI mit HTML-in-Canvas implementieren

So binden Sie HTML-in-Canvas in Ihre App ein:

  • Erstellen Sie eine direkte Implementierung mit den Browser-APIs.
  • Verwenden Sie ein Framework, das HTML-in-Canvas unterstützt.

Sie können sich auch von einem KI-Coding-Agenten unterstützen lassen. Hier erfahren Sie, wie Sie die Arbeit mit Ihrem Coding-Agenten mithilfe von Modern Web Guidance verbessern können.

Direkte Implementierung

Die Implementierung hängt vom Kontext ab, in dem Sie sie verwenden. Sehen Sie sich zuerst die technischen Konzepte an, die in allen Kontexten gleich sind, z. B. drawable-Inhalte und das paint-Ereignis.

Hier erfahren Sie, wie Sie das Elementbild in ein Canvas zeichnen und die Geometrie des Elements für die folgenden Kontexte aktualisieren:

Unterstützung für Bibliotheken und Frameworks

Mehrere beliebte Bibliotheken haben experimentelle Unterstützung für HTML-in-Canvas hinzugefügt, sowohl für WebGL- und WebGPU-Texturen als auch für 2D-Canvas-Effekte. Informationen zum aktuellen Supportstatus und zur Implementierung finden Sie in der Dokumentation der jeweiligen Bibliothek.

Three.js

Das manuelle Aktualisieren von Matrizen kann mühsam sein, daher wird in Frameworks integrierte Unterstützung hinzugefügt. Three.js bietet beispielsweise experimentelle Unterstützung mit 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 unterstützt auch HTML-in-Canvas über die Textur-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 unterstützt HTML-in-Canvas über die Klasse 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 bietet seit v8.19.0 Unterstützung für HTML-in-Canvas:

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 ist eine Open-Source-Bibliothek mit UI-Komponenten, die HTML-in-Canvas verwenden.

HTML-in-Canvas mit einem Coding-Agenten implementieren

Wenn Sie einen KI-Programmieragenten verwenden, installieren Sie Modern Web Guidance. Diese Erweiterung enthält die neuesten Implementierungsanleitungen für HTML-in-Canvas. Neben HTML-in-Canvas deckt Modern Web Guidance auch andere moderne Browser-APIs und Best Practices ab.

Nächste Schritte