HTML-ইন-ক্যানভাস এক নজরে

Natalia Markoborodova

HTML-in-Canvas API, DOM-এর ইন্ট্যার‍্যাক্টিভ ও অ্যাক্সেসিবল দুনিয়া এবং <canvas>-এর হাই-পারফর্ম্যান্স, পিক্সেল-লেভেল কন্ট্রোলের মধ্যে ব্যবধান দূর করে। API আপনাকে সরাসরি 2D, WebGL বা WebGPU ক্যানভাস প্রসঙ্গে লাইভ DOM সাবট্রি আঁকতে দেয়—যখন ব্রাউজার ইন্টারঅ্যাক্টিভিটি, অ্যাক্সেসিবিলিটি ট্রি এবং ব্রাউজার-লেভেল ইন্টিগ্রেশন বজায় রাখে।

HTML-ইন-Canvas API-এর ভিডিও ওভারভিউ।

HTML-in-Canvas-এর সুবিধা, এটি কীভাবে আগের ওয়ার্কঅ্যারাউন্ডের তুলনায় উন্নত এবং কোন কোন ব্যবহারের ক্ষেত্রে এটি সবচেয়ে উপযুক্ত, সেই সম্পর্কে জানতে, Chrome 157-এ HTML-in-Canvas: 2D, WebGL এবং WebGPU-এর মধ্যে ইন্টার‍্যাক্টিভ DOM পড়ুন।

HTML-ইন-Canvas-এর মাধ্যমে আপনার UI প্রয়োগ করুন

আপনার অ্যাপে HTML-ইন-Canvas ইন্টিগ্রেট করতে, আপনি এগুলি করতে পারেন:

  • ব্রাউজার API ব্যবহার করে সরাসরি প্রয়োগ করার সুবিধা তৈরি করুন।
  • এমন ফ্রেমওয়ার্ক ব্যবহার করুন যা HTML-ইন-ক্যানভাসে কাজ করে।

এছাড়াও, আপনাকে সাহায্য করার জন্য আপনি কোডিং এজেন্ট ব্যবহার করতে পারেন। মডার্ন ওয়েব নির্দেশিকা-এর মাধ্যমে আপনার কোডিং এজেন্ট অভিজ্ঞতা কীভাবে উন্নত করবেন তা জানুন।

সরাসরি প্রয়োগ করা

আপনি যে প্রসঙ্গে ব্যবহার করছেন তার উপর নির্ভর করে এটি প্রয়োগ করা হয়। শুরু করার আগে, সব প্রসঙ্গে সাধারণ প্রযুক্তিগত ধারণা পর্যালোচনা করুন, যেমন drawable কন্টেন্ট এবং paint ইভেন্ট।

নিম্নলিখিত প্রসঙ্গে ক্যানভাসে এলিমেন্টের ছবি কীভাবে আঁকবেন এবং এলিমেন্টের জিওমেট্রি কীভাবে আপডেট করবেন তা জানুন:

লাইব্রেরি ও ফ্রেমওয়ার্ক সংক্রান্ত সহায়তা

বেশ কিছু জনপ্রিয় লাইব্রেরি, WebGL ও WebGPU টেক্সচার এবং 2D ক্যানভাস এফেক্টের জন্য পরীক্ষামূলক HTML-ইন-ক্যানভাস সাপোর্ট যোগ করেছে। প্রতিটি লাইব্রেরির বর্তমান সাপোর্ট স্ট্যাটাস এবং প্রয়োগ সংক্রান্ত বিবরণের জন্য তার ডকুমেন্টেশন চেক করুন।

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-এ টেক্সচার API ব্যবহার করে HTML-ইন-ক্যানভাসও কাজ করে:

// 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-ইন-ক্যানভাসের জন্য সহায়তা শিপ করেছে:

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-ইন-Canvas ব্যবহার করে।

কোডিং এজেন্টের সাহায্যে HTML-ইন-ক্যানভাস প্রয়োগ করা

আপনি কোডিং এজেন্ট ব্যবহার করলে, মডার্ন ওয়েব নির্দেশিকা ইনস্টল করুন, যার মধ্যে HTML-ইন-ক্যানভাসের জন্য লেটেস্ট প্রয়োগ সংক্রান্ত নির্দেশাবলী অন্তর্ভুক্ত রয়েছে। HTML-ইন-ক্যানভাস ছাড়াও, মডার্ন ওয়েব নির্দেশিকা অন্যান্য আধুনিক ব্রাউজার API এবং পেশাদার পদ্ধতি কভার করে।

পরবর্তী ধাপ