ภาพรวมของ HTML-in-Canvas

Natalia Markoborodova

HTML-in-Canvas API ช่วยลดช่องว่างระหว่างโลกของ DOM ที่เข้าถึงได้และมีการโต้ตอบกับการควบคุมระดับพิกเซลที่มีประสิทธิภาพสูงของ <canvas> API นี้ช่วยให้คุณวาดซับทรี DOM แบบสดลงในบริบท Canvas 2D, WebGL หรือ WebGPU ได้โดยตรง ขณะที่เบราว์เซอร์ยังคงรักษาการโต้ตอบ ทรีการช่วยเหลือพิเศษ และการผสานรวมระดับเบราว์เซอร์ไว้

ภาพรวมวิดีโอของ HTML-in-Canvas API

หากต้องการดูข้อมูลเกี่ยวกับประโยชน์ของ HTML-in-Canvas, วิธีปรับปรุงวิธีแก้ปัญหาชั่วคราวก่อนหน้านี้ และกรณีการใช้งานที่เหมาะสมที่สุด โปรดอ่าน HTML-in-Canvas ใน Chrome 157: DOM แบบอินเทอร์แอกทีฟภายใน 2D, WebGL และ WebGPU

ใช้ UI กับ HTML-in-Canvas

หากต้องการผสานรวม HTML-in-Canvas เข้ากับแอป คุณสามารถทำดังนี้

  • สร้างการติดตั้งใช้งานโดยตรงโดยใช้ API ของเบราว์เซอร์
  • ใช้เฟรมเวิร์กที่รองรับ HTML-in-Canvas

นอกจากนี้ คุณยังใช้ตัวแทนการเขียนโค้ดเพื่อช่วยเหลือคุณได้ด้วย ดูวิธีปรับปรุงประสบการณ์การใช้งานเอเจนต์การเขียนโค้ดด้วยคำแนะนำในการพัฒนาเว็บที่ทันสมัย

การติดตั้งใช้งานโดยตรง

การติดตั้งใช้งานจะขึ้นอยู่กับบริบทที่คุณใช้ ก่อนเริ่มต้น โปรดอ่านแนวคิดทางเทคนิคที่ใช้กันโดยทั่วไปในทุกบริบท เช่น เนื้อหา drawable และเหตุการณ์ paint

ดูวิธีวาดรูปภาพองค์ประกอบลงใน Canvas และอัปเดตเรขาคณิตขององค์ประกอบสำหรับบริบทต่อไปนี้

การรองรับไลบรารีและเฟรมเวิร์ก

ไลบรารียอดนิยมหลายรายการได้เพิ่มการรองรับ HTML-in-Canvas เวอร์ชันทดลองสำหรับพื้นผิว WebGL และ WebGPU รวมถึงเอฟเฟกต์ Canvas 2 มิติ โปรดดูเอกสารประกอบของแต่ละไลบรารีเพื่อดูสถานะการรองรับปัจจุบันและรายละเอียดการติดตั้งใช้งาน

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 ยังรองรับ HTML-in-Canvas โดยใช้ Texture 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 รองรับ HTML-in-Canvas ผ่านคลาส 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 เปิดตัวการรองรับ HTML-in-Canvas ใน 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 เป็นไลบรารีคอมโพเนนต์ UI แบบโอเพนซอร์สที่ใช้ HTML-in-Canvas

ใช้ HTML-in-Canvas กับเอเจนต์การเขียนโค้ด

หากใช้ Agent การเขียนโค้ด ให้ติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัย ซึ่งมีวิธีการติดตั้งใช้งานล่าสุดสำหรับ HTML-in-Canvas นอกจาก HTML-in-Canvas แล้ว คำแนะนำในการพัฒนาเว็บที่ทันสมัยยังครอบคลุม API อื่นๆ ของเบราว์เซอร์ที่ทันสมัยและแนวทางปฏิบัติแนะนำด้วย

ขั้นตอนถัดไป