HTML-in-Canvas 概览

Natalia Markoborodova

HTML-in-Canvas API 弥合了 DOM 的交互式和无障碍世界与 <canvas> 的高性能、像素级控制之间的差距。该 API 可让您直接在 2D、WebGL 或 WebGPU 画布上下文中绘制实时 DOM 子树，同时浏览器会保留互动性、无障碍树和浏览器级集成。

HTML-in-Canvas API 视频概览。

如需了解 HTML-in-Canvas 的优势、它如何改进早期权宜解决方法，以及它最适合哪些用例，请参阅 Chrome 157 中的 HTML-in-Canvas：2D、WebGL 和 WebGPU 中的交互式 DOM。

使用 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 还支持使用其纹理 API 在 Canvas 中嵌入 HTML：

// 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 通过 BABYLON.HtmlTexture 类支持 HTML-in-Canvas：

// 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 在 v8.19.0 中发布了对 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 是一个开源界面组件库，这些组件使用 HTML-in-Canvas。

使用编码智能体实现 HTML-in-Canvas

如果您使用编码智能体，请安装Modern Web Guidance，其中包含有关 HTML-in-Canvas 的最新实现说明。除了 HTML-in-Canvas 之外，Modern Web Guidance 还涵盖了其他现代浏览器 API 和最佳实践。

后续步骤