Panoramica di HTML-in-Canvas

Natalia Markoborodova

L'API HTML-in-Canvas colma il divario tra il mondo interattivo e accessibile del DOM e il controllo ad alte prestazioni a livello di pixel di <canvas>. L'API consente di disegnare sottoalberi DOM attivi direttamente in contesti canvas 2D, WebGL o WebGPU, mentre il browser mantiene l'interattività, gli alberi di accessibilità e le integrazioni a livello di browser.

Panoramica video dell'API HTML-in-Canvas.

Per scoprire i vantaggi di HTML-in-Canvas, come migliora le soluzioni alternative precedenti e per quali casi d'uso è più adatto, leggi HTML-in-Canvas in Chrome 157: DOM interattivo all'interno di 2D, WebGL e WebGPU.

Implementa la tua UI con HTML-in-Canvas

Per integrare HTML-in-Canvas nella tua app, puoi:

  • Crea un'implementazione diretta utilizzando le API del browser.
  • Utilizza un framework che supporti HTML-in-Canvas.

Puoi anche utilizzare un agente di programmazione per aiutarti. Scopri come migliorare la tua esperienza con l'agente di programmazione con Modern Web Guidance.

Implementazione diretta

L'implementazione dipende dal contesto che utilizzi. Prima di iniziare, esamina i concetti tecnici comuni a tutti i contesti, come i contenuti drawable e l'evento paint.

Scopri come disegnare l'immagine dell'elemento in un canvas e aggiornare la geometria dell'elemento per i seguenti contesti:

Supporto di librerie e framework

Diverse librerie popolari hanno aggiunto il supporto sperimentale di HTML-in-Canvas per le texture WebGL e WebGPU, nonché per gli effetti canvas 2D. Consulta la documentazione di ogni libreria per conoscere lo stato di supporto attuale e i dettagli di implementazione.

Three.js

L'aggiornamento manuale delle matrici può essere noioso, quindi i framework stanno aggiungendo il supporto integrato. Ad esempio, Three.js fornisce un supporto sperimentale utilizzando 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 supporta anche HTML-in-Canvas utilizzando la relativa API texture:

// 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 supporta HTML-in-Canvas tramite la classe 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 ha rilasciato il supporto per HTML-in-Canvas in 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 è una libreria open source di componenti UI che utilizzano HTML-in-Canvas.

Implementa HTML-in-Canvas con un agente di programmazione

Se utilizzi un agente di programmazione, installa Modern Web Guidance, che include le istruzioni di implementazione più recenti per HTML-in-Canvas. Oltre a HTML-in-Canvas, Modern Web Guidance copre altre API dei browser moderni e best practice.

Passaggi successivi