Ringkasan HTML di Canvas

Natalia Markoborodova

HTML-in-Canvas API menjembatani kesenjangan antara dunia DOM yang interaktif dan mudah diakses serta kontrol tingkat piksel berperforma tinggi dari <canvas>. API ini memungkinkan Anda menggambar subhierarki DOM aktif langsung ke konteks kanvas 2D, WebGL, atau WebGPU—sementara browser mempertahankan interaktivitas, hierarki aksesibilitas, dan integrasi tingkat browser.

Ringkasan video HTML-in-Canvas API.

Untuk mempelajari manfaat HTML-in-Canvas, cara fitur ini meningkatkan solusi sebelumnya, dan kasus penggunaan yang paling sesuai, baca HTML-in-Canvas di Chrome 157: DOM Interaktif di dalam 2D, WebGL, dan WebGPU.

Mengimplementasikan UI dengan HTML-in-Canvas

Untuk mengintegrasikan HTML-in-Canvas ke dalam aplikasi, Anda dapat:

  • Membuat penerapan langsung menggunakan API browser.
  • Gunakan framework yang mendukung HTML-in-Canvas.

Anda juga dapat menggunakan agen coding untuk membantu Anda. Pelajari cara meningkatkan pengalaman agen coding Anda dengan Modern Web Guidance.

Penerapan langsung

Implementasinya bergantung pada konteks yang Anda gunakan. Sebelum memulai, tinjau konsep teknis yang umum di semua konteks, seperti konten drawable dan peristiwa paint.

Pelajari cara menggambar gambar elemen ke dalam kanvas dan memperbarui geometri elemen untuk konteks berikut:

Dukungan library dan framework

Beberapa library populer telah menambahkan dukungan HTML-in-Canvas eksperimental, untuk tekstur WebGL dan WebGPU serta efek kanvas 2D. Periksa dokumentasi setiap library untuk mengetahui status dukungan dan detail implementasinya saat ini.

Three.js

Memperbarui matriks secara manual bisa jadi membosankan, sehingga framework menambahkan dukungan bawaan. Misalnya, Three.js menyediakan dukungan eksperimental menggunakan 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 juga mendukung HTML-in-Canvas menggunakan API teksturnya:

// 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 mendukung HTML-in-Canvas melalui class 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 menyediakan dukungan untuk HTML-in-Canvas di 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 adalah library open source komponen UI yang menggunakan HTML-in-Canvas.

Mengimplementasikan HTML-in-Canvas dengan agen coding

Jika Anda menggunakan agen coding, instal Modern Web Guidance, yang menyertakan petunjuk penerapan terbaru untuk HTML-in-Canvas. Selain HTML-in-Canvas, Modern Web Guidance mencakup API browser modern dan praktik terbaik lainnya.

Langkah berikutnya