Tổng quan về HTML trong Canvas

Natalia Markoborodova

HTML-in-Canvas API thu hẹp khoảng cách giữa thế giới tương tác và dễ tiếp cận của DOM với khả năng kiểm soát hiệu suất cao, cấp pixel của <canvas>. API này cho phép bạn vẽ trực tiếp các cây con DOM đang hoạt động vào ngữ cảnh canvas 2D, WebGL hoặc WebGPU, trong khi trình duyệt vẫn giữ lại khả năng tương tác, cây hỗ trợ tiếp cận và các tính năng tích hợp ở cấp trình duyệt.

Video tổng quan về HTML-in-Canvas API.

Để tìm hiểu về lợi ích của HTML-in-Canvas, cách cải thiện các giải pháp trước đó và những trường hợp sử dụng phù hợp nhất, hãy đọc bài viết HTML-in-Canvas trong Chrome 157: DOM tương tác bên trong 2D, WebGL và WebGPU.

Triển khai giao diện người dùng bằng HTML-in-Canvas

Để tích hợp HTML-in-Canvas vào ứng dụng, bạn có thể:

  • Tạo một phương thức triển khai trực tiếp bằng API trình duyệt.
  • Sử dụng một khung hỗ trợ HTML-in-Canvas.

Bạn cũng có thể sử dụng tác nhân lập trình để hỗ trợ. Tìm hiểu cách cải thiện trải nghiệm của tác nhân lập trình bằng Modern Web Guidance.

Triển khai trực tiếp

Cách triển khai phụ thuộc vào bối cảnh bạn đang sử dụng. Trước khi bắt đầu, hãy xem lại các khái niệm kỹ thuật phổ biến trong mọi bối cảnh, chẳng hạn như nội dung drawable và sự kiện paint.

Tìm hiểu cách vẽ hình ảnh phần tử vào canvas và cập nhật hình học của phần tử cho các bối cảnh sau:

Hỗ trợ thư viện và khung

Một số thư viện phổ biến đã thêm tính năng hỗ trợ HTML-in-Canvas thử nghiệm cho kết cấu WebGL và WebGPU cũng như hiệu ứng canvas 2D. Hãy xem tài liệu của từng thư viện để biết trạng thái hỗ trợ hiện tại và thông tin chi tiết về cách triển khai.

Three.js

Việc cập nhật ma trận theo cách thủ công có thể gây tẻ nhạt, vì vậy, các khung đang bổ sung tính năng hỗ trợ tích hợp sẵn. Ví dụ: Three.js cung cấp hỗ trợ thử nghiệm bằng cách sử dụng 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 cũng hỗ trợ HTML-in-Canvas bằng cách sử dụng API kết cấu của họ:

// 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 hỗ trợ HTML-in-Canvas thông qua lớp 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 đã cung cấp tính năng hỗ trợ HTML-in-Canvas trong 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 là một thư viện nguồn mở gồm các thành phần giao diện người dùng sử dụng HTML-in-Canvas.

Triển khai HTML-in-Canvas bằng tác nhân lập trình

Nếu bạn sử dụng tác nhân lập trình, hãy cài đặt Modern Web Guidance, trong đó có hướng dẫn triển khai mới nhất cho HTML-in-Canvas. Ngoài HTML-in-Canvas, Modern Web Guidance còn đề cập đến các API trình duyệt hiện đại khác và các phương pháp hay nhất.

Các bước tiếp theo