HTML'yi 2D tuvalde oluşturma

Natalia Markoborodova

HTML-in-Canvas API, etkileşimli ve erişilebilir DOM alt ağaçlarını doğrudan 2D tuval bağlamında oluşturmanıza olanak tanır. API ve avantajları hakkında daha fazla bilgi edinmek için HTML-in-Canvas'a genel bakış başlıklı makaleyi okuyun.

Bu kılavuzda, HTML'nin 2D tuvalde nasıl oluşturulacağı gösterilmektedir. HTML'yi 2D tuvalde oluşturmak için aşağıdaki adımları uygulamanız gerekir:

  1. Tuvalinizi hazırlayın. Tarayıcının HTML'yi bir tuvalde oluşturması gerektiğini bildirmek için doğru özellikleri bildirimli olarak ayarlayın. Bu kurulum 2D, WebGL ve WebGPU bağlamlarında aynıdır. Tuvalinizi nasıl ayarlayacağınızı ve HTML öğelerini bağımsız olarak çizilecek şekilde nasıl tanımlayacağınızı öğrenin.
  2. Öğe resmini tuvale sürükleyin.
  3. [İsteğe bağlı] DOM'u ve pikselleri senkronize edin.

HTML öğelerini 2D tuvalde çizme

Tuval hazır olduğunda ve öğeler drawable olarak işaretlendiğinde drawElementImage() yöntemini kullanarak bunları 2D bağlamda oluşturun.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const childElement1 = document.getElementById("childElement1");
const childElement2 = document.getElementById("childElement2");

canvas.onpaint = () => {
  ctx.reset();
  // 1. Draw the primary element at coordinate (20, 20)
  ctx.drawElementImage(childElement1, 20, 20);
  // 2. Draw the secondary nested button at a custom offset
  ctx.drawElementImage(childElement2, 40, 90);
}

drawElementImage(); 3 bağımsız değişkenli, 5 bağımsız değişkenli, 7 bağımsız değişkenli ve 9 bağımsız değişkenli formları destekler ve isteğe bağlı bir options parametresini kabul eder:

// 1. Basic position: (element, dx, dy, options?)
ctx.drawElementImage(targetElement, 100, 150);

// 2. Scaled / resized: (element, dx, dy, dWidth, dHeight, options?)
ctx.drawElementImage(targetElement, 100, 150, 180, 60);

// 3. Cropped, default size: (element, sx, sy, swidth, sheight, dx, dy, options?)
ctx.drawElementImage(targetElement, 0, 0, 90, 30, 100, 150);

// 4. Cropped and resized: (element, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, options?)
ctx.drawElementImage(targetElement, 0, 0, 90, 30, 100, 150, 180, 60);
Aşırı yükleme formu Parametreler Düzen efekti
Varsayılan boyut (element, dx, dy) Varsayılan boyutundaki öğenin tamamı, sol üst köşesi (dx, dy) konumunda.
Özel hedef kutusu (element, dx, dy, dwidth, dheight) Öğe resminin tamamını tuvaldeki dw × dh görüntü alanına sığacak şekilde ölçeklendirir.
Kırpılmış, varsayılan boyut (element, sx, sy, swidth, sheight, dx, dy) Yalnızca (sx, sy) noktasından başlayan ve bu alanın varsayılan boyutunda (varsayılan boyutlu formla aynı ölçekte) çizilen swidth × sheight alanı.
Kaynak dilimden hedefe (element, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) Kaynak öğeyi (sx, sy) noktasından başlayarak swidth × sheight boyutlarında kırpar, ardından hedefe (dx, dy, dwidth, dheight) eşler.

DOM'u ve pikselleri senkronize etme

DOM düzeni ve CSS stili reaktifken <canvas> oluşturma zorunlu olduğundan tarayıcının, oluşturulan tuval piksellerini, etkileşimli isabet testi bölgelerini ve erişilebilirlik ağaçlarını senkronize tutacak bir mekanizmaya ihtiyacı vardır. DOM ve pikselleri nasıl senkronize edeceğinizi öğrenmeden önce, DOM öğeleri güncellendiğinde ve yeniden çizilmesi gerektiğinde tetiklenen paint etkinliğini anladığınızdan emin olun.

2D tuval bağlamlarında tarayıcı; öğenin düzen koordinatlarını, erişilebilirlik sınırlarını ve işaretçi isabet testini çizilen tuval koordinatlarıyla otomatik olarak senkronize eder.

Öğe geometrisini manuel olarak güncelleme

İleri düzey senaryolarda, otomatik geometri senkronizasyonunu devre dışı bırakabilir ve uzamsal dönüşümleri manuel olarak kontrol edebilirsiniz. Tarayıcının, öğenin mevcut isabet testi koordinatlarını otomatik olarak geçersiz kılmasını önlemek için { preserveElementGeometry: true } değerini drawElementImage() değerine iletin:

// 1. Draw the element without altering its existing hit-test bounds
ctx.drawElementImage(targetElement, elementX, 200, { preserveElementGeometry: true });

// 2. Construct a custom transform matrix as needed,
// assuming scaleX/scaleY = canvas grid pixels per CSS pixel,
// from your resize observer (see "Units and sizing").
const currentTransform = new DOMMatrix();
currentTransform.a = 1.5;          // scale X
currentTransform.e = x / scaleX;   // translate X: grid px → CSS px
currentTransform.f = y / scaleY;   // translate Y: grid px → CSS px

// 3. Explicitly apply the custom transform
canvas.updateElementGeometry(targetElement, { canvasTransform: currentTransform });
2D'de drawElementImage() bu geometriyi otomatik olarak günceller. Bu demoda, { preserveElementGeometry: true } ayarlandığında geometrinin nasıl senkronize edilmediği gösterilmektedir.

Sonraki adımlar