‫HTML-in-Canvas في الإصدار 157 من Chrome: نموذج DOM تفاعلي داخل 2D وWebGL وWebGPU

Natalia Markoborodova

تاريخ النشر: 26 أكتوبر 2026

بعد نجاح مرحلة التجربة والتقييم، يمثّل الإصدار 157 من Chrome الإصدار الثابت الرسمي من واجهة برمجة التطبيقات HTML-in-Canvas API. توفّر واجهة HTML-in-Canvas API حلاً يجمع بين ميزات التفاعل وسهولة الوصول التي يقدّمها نموذج DOM، وميزات الأداء العالي والتحكّم الدقيق في وحدات البكسل التي يوفّرها عنصر <canvas>. توفّر لك واجهة برمجة التطبيقات هذه أفضل ما في العالمين: إمكانات المتصفّح الغنية ورسومات اللوحة المسرَّعة بوحدة معالجة الرسومات.

معضلة Canvas مقابل DOM

في السابق، عند إنشاء تطبيقات ويب تتطلّب الكثير من الموارد المرئية، كان عليك الاختيار بين عناصر HTML العادية وسياقات لوحة الرسم الأولية.

قبل HTML-in-Canvas

قبل توفّر واجهة برمجة التطبيقات هذه، إذا كنت تنشئ واجهات مستخدم تعتمد بشكل كبير على لوحة الرسم، كان عليك الاختيار بين طريقتَين، ولكل منهما سلبياتها:

1. عرض النص مباشرةً كوحدات بكسل في لوحة الرسم (fillText()): كانت التطبيقات ترسم النص وعناصر التحكّم في واجهة المستخدم بشكل إلزامي كوحدات بكسل أولية. أدّى هذا النهج إلى السلبيات التالية:
   • تعطُّل أدوات تسهيل الاستخدام: لا يمكن لبرامج قراءة الشاشة والأدوات المساعدة قراءة وحدات بكسل لوحة الرسم ما لم تنشئ يدويًا نموذج DOM احتياطيًا غير مرئي وتزامنه.
   • فقدان ميزات المتصفّح: لا يمكن للمستخدمين البحث باستخدام ميزة "البحث في الصفحة" (Ctrl/Cmd+F)، أو نسخ النص ولصقه بشكل طبيعي، أو تفعيل قوائم السياق، أو استخدام ميزة الترجمة والتدقيق الإملائي في المتصفّح.
   • محرّكات الخطوط المعقّدة: يتطلّب توفير الدعم للغات متعددة تجميع محرّكات تخطيط JavaScript كبيرة.
2. تراكبات HTML عائمة فوق اللوحة: على سبيل المثال، استخدام مكتبات تضع عناصر HTML العادية فوق اللوحة من خلال حساب المربّعات المحيطة وتحويلات المصفوفات في JavaScript. تشمل سلبيات هذا النهج ما يلي:
   • تأخّر المزامنة والتمزّق المرئي: يمكن أن يؤدي الانتقال للأعلى أو للأسفل أو التكبير أو التصغير أو حركات الكاميرا في العرض الثلاثي الأبعاد إلى انحراف عناصر DOM في التراكب أو اهتزازها مقارنةً بوحدات بكسل اللوحة بسبب الاختلافات في وقت عرض اللقطة.
   • قيود الاقتصاص والترتيب على المحور Z: تظهر تراكبات HTML دائمًا أعلى مخزن اللوحة المؤقت بالكامل. لم يكن من الممكن تضمين HTML داخل مشهد ثلاثي الأبعاد (على سبيل المثال، خلف عنصر ثلاثي الأبعاد أو داخل مادة زجاجية أو منعكس في مرآة) بدون حلول بديلة معقّدة لتحويل iframe إلى صورة.
   • العبء على الأداء: للحفاظ على محاذاة العناصر المضافة مع اللوحة، عليك إعادة احتساب تحويل كل عنصر في JavaScript وكتابته في style.transform على كل إطار. بعد ذلك، يحلّل المتصفّح كل سلسلة ويعيد احتساب نمط العنصر قبل أن يتمكّن من عرض الإطار، وبالتالي يزداد عمل سلسلة التعليمات الرئيسية مع كل تراكب تضيفه. في سياق ثنائي الأبعاد، يحدّث drawElementImage() موضع العنصر نيابةً عنك. في WebGL وWebGPU، يتم تمرير التحويل الذي يتم حسابه إلى updateElementGeometry() كمصفوفة. وفي كلتا الحالتين، لا يحلّل المتصفّح CSS أو يعيد احتساب الأنماط.

المزايا الرئيسية لـ HTML-in-Canvas

تتجنّب ميزة HTML-in-Canvas هذه المشاكل. من خلال وضع HTML داخل العنصر <canvas>، يظل المحتوى تفاعليًا، وتعمل جميع عمليات دمج المتصفّح تلقائيًا.

يتمتع محتوى HTML المعروض داخل <canvas> بالإمكانات نفسها التي يتمتع بها محتوى HTML خارج <canvas>:

• تنسيق النص وتخطيطه: يتيح هذا الخيار تنسيق النص وتخطيطه، بما في ذلك النص المتعدد الأسطر أو النص الثنائي الاتجاه مع تطبيق أنماط CSS.
• عناصر التحكّم في النماذج: عناصر تحكّم في النماذج معبّرة مع خيارات تخصيص شاملة لـ CSS والتظليل
• تحديد النص ونسخه ولصقه والنقر بزر الماوس الأيمن: يمكن للمستخدمين تمييز النص داخل المشاهد الثلاثية الأبعاد أو فتح قوائم السياقات.
• تسهيل الاستخدام: يتم عرض محتوى HTML داخل اللوحة في شجرة تسهيل الاستخدام لبرامج قراءة الشاشة.
• دمج ميزات المتصفّح: تعمل ميزات المتصفّح، مثل الترجمة والملء التلقائي و"البحث في الصفحة"، تلقائيًا. يمكن للمستخدمين ترجمة النص أو البحث عنه داخل زخارف WebGL وWebGPU.
• دمج الإضافات: تعمل إضافات المتصفّح على المحتوى. على سبيل المثال، تعمل إضافة استبدال النص على تعديل النص المعروض على الشبكات الثلاثية الأبعاد تلقائيًا.
• التكامل مع "أدوات مطوّري البرامج": يمكنك فحص أنماط CSS لعناصر واجهة المستخدم في لوحة الرسم وتعديلها مباشرةً في "أدوات مطوّري البرامج في Chrome".
• قابلية الفهرسة ووكلاء الذكاء الاصطناعي: يمكن لزواحف الويب ووكلاء الذكاء الاصطناعي فهرسة محتوى DOM المعروض في مشاهد ثنائية وثلاثية الأبعاد.
• تعديل الوسائط وتصديرها: يمكنك تصدير تركيبات لوحة الرسم الكاملة التي تحتوي على عناصر DOM مباشرةً إلى صور (toDataURL() أو toBlob()) أو فيديوهات (captureStream()).

حالات الاستخدام الأساسية

تتيح ميزة HTML-in-Canvas إمكانات في عدة مجالات:

• التطبيقات الكبيرة المستندة إلى لوحة الرسم: يمكن لتطبيقات الويب الثقيلة عرض مكوّنات واجهة المستخدم مباشرةً في مساحات عمل لوحة الرسم، ما يحسّن من إمكانية الوصول ويقلّل من حجم الحزمة.
• المشاهد والألعاب الثلاثية الأبعاد: يمكن لتجارب WebXR الغامرة والألعاب وضع عناصر DOM تفاعلية، مثل أجهزة الكمبيوتر داخل اللعبة أو الكتب الثلاثية الأبعاد القابلة للقراءة، مباشرةً داخل المشاهد.
• تعديل الوسائط وتصديرها: يمكن لأدوات التصميم التي تجمع بين أسلوب الطباعة الغني في HTML وتأثيرات التظليل تصدير المشاهد المركّبة مباشرةً إلى صور أو فيديوهات.
• واجهات مستخدم معبّرة: يمكنك معالجة محتوى HTML كوحدات بكسل أولية لإنشاء تأثيرات بصرية مستندة إلى أدوات التظليل.

دليل البدء السريع لاستخدام HTML في Canvas

يتطلب عرض HTML في لوحة الرسم الخطوات التالية:

1. جهِّز لوحتك. يمكنك ضبط السمات المناسبة بشكل تعريفي لإعلام المتصفّح بأنّه يجب عرض HTML في لوحة رسم. هذا الإعداد متطابق في سياقات 2D وWebGL وWebGPU. تعرَّف على كيفية إعداد لوحة الرسم وكيفية تحديد عناصر HTML ليتم رسمها بشكل مستقل.

   <!-- Prepare your canvas by setting the `content` attribute -->
   <canvas id="canvas" width="600" height="400" content="drawable">
     <!-- Mark child as `drawable` to render to canvas -->
     <div id="myElement" drawable>
       <!-- Your HTML here -->
     </div>
   </canvas>
   

2. ارسم صورة العنصر في لوحة العرض. يعتمد التنفيذ الدقيق على ما إذا كنت تعرض HTML في سياق ثنائي الأبعاد أو WebGL أو WebGPU.

   const ctx = canvas.getContext("2d");
   // Draw HTML element into canvas in 2D
   ctx.drawElementImage(myElement, myElementX, myElementY);
   

3. اختياري: مزامنة نموذج DOM ووحدات البكسل تعتمد مزامنة الشكل الهندسي أيضًا على السياق الذي تستخدمه. في الوضع الثنائي الأبعاد، يتعامل المتصفّح مع هذه العملية تلقائيًا، بينما في السياقات الثلاثية الأبعاد، عليك إنشاء عملية تحويل وتمريرها إلى طريقة updateElementGeometry.

   // In 3D, construct a transform as needed, for example:
   const transform = new DOMMatrix().translate(x, y);
   // Synchronize the element's DOM and pixels
   canvas.updateElementGeometry(myElement, { canvasTransform: transform });
   

دعم إطار العمل والمنظومة المتكاملة

تتيح مكتبات WebGL والرسومات الثلاثية الأبعاد الرئيسية استخدام HTML-in-Canvas:

• Three.js: يوفّر دعمًا تجريبيًا باستخدام THREE.HTMLTexture.

  const material = new THREE.MeshBasicMaterial();
  material.map = new THREE.HTMLTexture(uiElement);
  const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
  scene.add(mesh);
  

• PlayCanvas: يتيح بث مواد عرض HTML باستخدام setSource().

  canvas.addEventListener('paint', () => {
    htmlTexture.setSource(htmlElement);
  }, { once: true });
  

• Babylon.js: يوفّر ربطًا مدمجًا من خلال BABYLON.HtmlTexture.

  const htmlTexture = new BABYLON.HtmlTexture("htmlTexture", uiElement, scene);
  material.diffuseTexture = htmlTexture;
  

• PixiJS: تم توفير دعم مضمّن في الإصدار v8.19.0 مع HTMLSource.

  import { HTMLSource } from 'pixi.js/html-source';
  const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
  app.stage.addChild(sprite);
  

• ‫CanvasUI: مكتبة مكوّنات مفتوحة المصدر مصمَّمة خصيصًا لـ HTML-in-Canvas.

لمزيد من التفاصيل حول التنفيذ، يُرجى الاطّلاع على مستندات كل إطار عمل.

استراتيجيات رصد الميزات والاحتياطية

لضمان التوافق مع جميع المتصفّحات، تأكَّد من توافق واجهة برمجة التطبيقات قبل تشغيل الرمز:

export function supportsHtmlInCanvas() {
  if (typeof document === "undefined") return false;
  const canvas = document.createElement("canvas");
  canvas.setAttribute("content", "drawable");
  return canvas.content === "drawable";
}

إذا لم تكن واجهة برمجة التطبيقات متاحة، يمكنك الرجوع إلى واجهات مستخدم بديلة أو تراكبات HTML عائمة أو إحدى المكتبات المتاحة (على سبيل المثال، three-html-render أو html2canvas أو dom-to-image).

الخطوات التالية

• يمكنك الاطّلاع على مستندات HTML-in-Canvas الكاملة في "Chrome للمطوّرين".
• ترقية المساعدين في البرمجة باستخدام إرشادات الويب الحديث
• يمكنك مشاركة ملاحظاتك في مستودع WICG على GitHub.
• اطّلِع على العروض التوضيحية التي يقدّمها المنتدى حول HTML في Canvas.