סקירה כללית של HTML-in-Canvas

Natalia Markoborodova

‫HTML-in-Canvas API מגשר על הפער בין העולם האינטראקטיבי והנגיש של ה-DOM לבין הביצועים הגבוהים והשליטה ברמת הפיקסלים של <canvas>. ה-API מאפשר לכם לצייר עצי משנה של DOM בזמן אמת ישירות בהקשרים של קנבס בדו-ממד, ב-WebGL או ב-WebGPU, בזמן שהדפדפן שומר על האינטראקטיביות, עצי הנגישות והשילובים ברמת הדפדפן.

סרטון הסבר כללי על HTML-in-Canvas API

כדי לקרוא על היתרונות של HTML-in-Canvas, איך הוא משפר פתרונות קודמים ולאילו תרחישים לדוגמה הוא הכי מתאים, קראו את המאמר HTML-in-Canvas ב-Chrome 157: DOM אינטראקטיבי בתוך 2D,‏ WebGL ו-WebGPU.

הטמעת ממשק המשתמש באמצעות HTML ב-Canvas

כדי לשלב את HTML-in-Canvas באפליקציה, אתם יכולים:

  • ליצור הטמעה ישירה באמצעות ממשקי ה-API של הדפדפן.
  • להשתמש ב-framework שתומך ב-HTML-in-Canvas.

אתם יכולים גם להיעזר בסוכן תכנות. איך לשפר את חוויית השימוש בסוכן התכנות באמצעות Modern Web Guidance

הטמעה ישירה

ההטמעה תלויה בהקשר שבו אתם משתמשים. לפני שמתחילים, כדאי לעיין במושגים הטכניים שמשותפים לכל ההקשרים, כמו תוכן drawable ואירוע paint.

כדי ללמוד איך לצייר את תמונת הרכיב ב-canvas ולעדכן את הגיאומטריה של הרכיב בהקשרים הבאים:

תמיכה בספריות וב-frameworks

כמה ספריות פופולריות הוסיפו תמיכה ניסיונית ב-HTML-in-Canvas, לטקסטורות של WebGL ו-WebGPU וגם לאפקטים של קנבס דו-ממדי. כדי לבדוק את סטטוס התמיכה הנוכחי ואת פרטי ההטמעה של כל ספרייה, צריך לעיין במסמכי התיעוד שלה.

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 באמצעות ה-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 היא ספריית קוד פתוח של רכיבי ממשק משתמש שמשתמשים ב-HTML-in-Canvas.

הטמעת HTML-in-Canvas באמצעות סוכן תכנות

אם אתם משתמשים בסוכן תכנות, התקינו את Modern Web Guidance, שכולל את הוראות ההטמעה העדכניות ביותר של HTML-in-Canvas. בנוסף ל-HTML-in-Canvas, ‏Modern Web Guidance כולל ממשקי API מודרניים אחרים לדפדפנים מודרניים ושיטות מומלצות.

השלבים הבאים