HTML-in-Canvas के बारे में खास जानकारी

Natalia Markoborodova

HTML-in-Canvas API, डीओएम की इंटरैक्टिव और सुलभ दुनिया और <canvas> के बेहतरीन परफ़ॉर्मेंस और पिक्सल-लेवल कंट्रोल के बीच की दूरी को कम करता है. इस एपीआई की मदद से, लाइव डीओएम सबट्री को सीधे 2D, WebGL या WebGPU कैनवस कॉन्टेक्स्ट में ड्रॉ किया जा सकता है. इस दौरान, ब्राउज़र इंटरैक्टिविटी, सुलभता ट्री, और ब्राउज़र-लेवल के इंटिग्रेशन को बनाए रखता है.

HTML-in-Canvas API के बारे में खास जानकारी देने वाला वीडियो.

HTML-in-Canvas के फ़ायदों, इससे पहले के तरीकों में हुए सुधारों, और इसके इस्तेमाल के सबसे सही उदाहरणों के बारे में जानने के लिए, Chrome 157 में HTML-in-Canvas: 2D, WebGL, और WebGPU में इंटरैक्टिव डीओएम लेख पढ़ें.

HTML-in-Canvas की मदद से यूज़र इंटरफ़ेस (यूआई) लागू करना

अपने ऐप्लिकेशन में HTML-in-Canvas को इंटिग्रेट करने के लिए, ये काम किए जा सकते हैं:

  • ब्राउज़र एपीआई का इस्तेमाल करके, सीधे तौर पर लागू करें.
  • ऐसे फ़्रेमवर्क का इस्तेमाल करें जो HTML-in-Canvas के साथ काम करता हो.

मदद पाने के लिए, कोडिंग एजेंट का भी इस्तेमाल किया जा सकता है. मॉडर्न वेब गाइडेंस की मदद से, कोडिंग एजेंट के इस्तेमाल से जुड़े अपने अनुभव को बेहतर बनाने का तरीका जानें.

सीधे तौर पर लागू करना

लागू करने का तरीका, आपके इस्तेमाल के हिसाब से तय होता है. शुरू करने से पहले, उन तकनीकी कॉन्सेप्ट को समझें जो सभी कॉन्टेक्स्ट में एक जैसे होते हैं. जैसे, 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, अपने टेक्सचर एपीआई का इस्तेमाल करके HTML-in-Canvas के साथ भी काम करता है:

// 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 को लागू करना

अगर कोडिंग एजेंट का इस्तेमाल किया जा रहा है, तो मॉडर्न वेब गाइडेंस इंस्टॉल करें. इसमें कैनवस में एचटीएमएल लागू करने के नए निर्देश शामिल हैं. मॉडर्न वेब गाइडेंस में, HTML-in-Canvas के अलावा, अन्य मॉडर्न ब्राउज़र एपीआई और सबसे सही तरीके भी शामिल हैं.

अगले चरण