HTML-in-Canvas'a genel bakış

Natalia Markoborodova

HTML-in-Canvas API, DOM'un etkileşimli ve erişilebilir dünyası ile <canvas>'un yüksek performanslı, piksel düzeyinde kontrolü arasındaki boşluğu doldurur. API, canlı DOM alt ağaçlarını doğrudan 2D, WebGL veya WebGPU tuval bağlamlarına çizmenize olanak tanır. Bu sırada tarayıcı; etkileşimlilik, erişilebilirlik ağaçları ve tarayıcı düzeyinde entegrasyonları korur.

HTML-in-Canvas API'ye genel bakış videosu

HTML-in-Canvas'ın avantajları, önceki geçici çözümleri nasıl iyileştirdiği ve en uygun kullanım alanları hakkında bilgi edinmek için Chrome 157'de HTML-in-Canvas: 2D, WebGL ve WebGPU'da etkileşimli DOM başlıklı makaleyi okuyun.

Kullanıcı arayüzünüzü HTML-in-Canvas ile uygulama

HTML-in-Canvas'ı uygulamanıza entegre etmek için:

  • Tarayıcı API'lerini kullanarak doğrudan uygulama oluşturun.
  • HTML-in-Canvas'ı destekleyen bir çerçeve kullanın.

Size yardımcı olması için kodlama temsilcisi de kullanabilirsiniz. Modern Web Rehberi ile kodlama temsilcisi deneyiminizi nasıl iyileştireceğinizi öğrenin.

Doğrudan uygulama

Uygulama, kullandığınız bağlama bağlıdır. Başlamadan önce, tüm bağlamlarda ortak olan teknik kavramları (ör. drawable içeriği ve paint etkinliği) inceleyin.

Öğe resmini bir tuvale nasıl çizeceğinizi ve aşağıdaki bağlamlar için öğenin geometrisini nasıl güncelleyeceğinizi öğrenin:

Kitaplık ve çerçeve desteği

Birçok popüler kitaplık, WebGL ve WebGPU dokularının yanı sıra 2D tuval efektleri için deneysel HTML-in-Canvas desteği ekledi. Her kitaplığın mevcut destek durumu ve uygulama ayrıntıları için ilgili kitaplığın dokümanlarını inceleyin.

Three.js

Matrisleri manuel olarak güncellemek sıkıcı olabilir. Bu nedenle çerçeveler yerleşik destek ekliyor. Örneğin, Three.js, THREE.HTMLTexture kullanarak deneysel destek sağlar:

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, doku API'sini kullanarak HTML-in-Canvas'ı da destekler:

// 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 sınıfı aracılığıyla HTML-in-Canvas'ı destekler:

// 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 sürümünde Canvas'ta HTML desteğini kullanıma sundu:

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 kullanan kullanıcı arayüzü bileşenlerinin açık kaynaklı bir kitaplığıdır.

Kodlama temsilcisiyle HTML-in-Canvas'ı uygulama

Kodlama temsilcisi kullanıyorsanız HTML-in-Canvas için en son uygulama talimatlarını içeren Modern Web Rehberi'ni yükleyin. Modern Web Rehberi, HTML-in-Canvas'ın yanı sıra diğer modern tarayıcı API'lerini ve en iyi uygulamaları da kapsar.

Sonraki adımlar