صور خلفية مستندة إلى لوحة الرسم

عرض صور الخلفية المتحركة آليًا

هناك طريقتان أساسيتان لعرض صور الخلفية المتحركة:

  1. استخدام صورة مجمعة لـ CSS لتعديل background-position في JavaScript
  2. استخدام حلول بديلة مع .toDataURL()

تعمل الطريقة الأولى بشكل رائع إذا كانت الصورة متوفّرة مسبقًا، ولكن ماذا لو كان يجب إنشاء المصدر آليًا، مثلاً باستخدام <canvas>؟ الحلّ للمشكلة رقم 1 هو استخدام .toDataURL() على لوحة الرسم وتعيين الخلفية على عنوان URL الذي تم إنشاؤه:

while(1) {
    var url = canvas.toDataURL('image/jpeg');
    el.style.background = 'url(' + url + ')';
}

هناك مشكلتان في هذه الطريقة:

  1. تضيف عناوين URL data: زيادة في الحجم بنسبة% 33 تقريبًا إلى الصورة الناتجة.
  2. يتم تعديل نموذج DOM بشكل كبير (el.style).

كلتا الطريقتَين غير فعالتَين: ولا يمكن استخدامهما في تطبيق ويب سلس دائمًا بمعدّل 60 لقطة في الثانية.

استخدام لوحة رسم ثنائية الأبعاد كخلفية

عرض توضيحي لاستخدام لوحة العرض كخلفية
العرض التوضيحي

تبيّن أنّ هناك واجهة برمجة تطبيقات غير عادية كانت متوفّرة في WebKit لسنوات ويمكنها استخدام لوحة الرسم كمصدر للخلفية. مع ذلك، لا تتوفّر مواصفات منشورة لهذه الميزة.

أولاً، بدلاً من تحديد عنوان URL للخلفية:

.bg {
    background: url(bg.png) no-repeat 50% 50%;
}

استخدِم -webkit-canvas()، مع الإشارة إلى معرّف سلسلة نصية لسياق لوحة الرسم:

.canvas-bg {
    background: -webkit-canvas(animation) no-repeat 50% 50%;
}

بعد ذلك، علينا إنشاء سياق ثنائي الأبعاد باستخدام إصدار خاص من .getContext():

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

مزيد من المعلومات من Dave Hyatt:

الحركات

كما هو موضّح في العرض التوضيحي، يمكننا إعادة استخدام requestAnimationFrame() لعرض حركة. هذا أمر رائع، لأنّه بعد ربط العناصر، يتم الاحتفاظ بالارتباط بين CSS وعنصر لوحة الرسم. لا داعي لتعديل نموذج DOM.

هل العرض التوضيحي غير متحرّك في Chrome؟

تحتوي القناة الثابتة الحالية من Chrome (الإصدار 23) على crbug.com/161699، الذي يمنع حركة requestAnimationFrame() من تعديل الخلفية بشكل صحيح. تم إصلاح هذه المشكلة في Chrome 25 (إصدار Canary حاليًا). من المفترض أيضًا أن يعمل الـ عرض التوضيحي بشكل جيد في Safari الحالي.

مزايا الأداء

نحن نتحدّث هنا عن لوحة الرسم. الحركات التي يتم تسريعها باستخدام الأجهزة متاحة الآن بالكامل (على الأقل للمتصفحات التي تعمل فيها هذه الميزة). وللتأكيد مجددًا، لا داعي لتعديل نموذج DOM من JavaScript.

استخدام WebGL كخلفية

لحظة من فضلك. هل يعني ذلك أنّه يمكننا تشغيل خلفية CSS باستخدام WebGL؟ بالطبع! WebGL هو مجرد سياق ثلاثي الأبعاد للوحة الرسم. ما عليك سوى استبدال "2d" بـ "experimental-webgl"، وهكذا.

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

إليك إثبات المفهوم الذي يحتوي على عنصر div تم رسم خلفيته باستخدام مظلّلات الرأس والجزئيات: العرض التوضيحي

طُرق أخرى

من الجدير بالذكر أنّ Mozilla كانت تستخدم -moz-element() (MDN) لفترة طويلة. هذا الجزء من مواصفات المستوى 4 من وحدة قيم صور CSS والمحتوى الذي تم استبداله يسمح لك بإنشاء صورة تم إنشاؤها من HTML عشوائي: الفيديوهات ولوحات الرسم ومحتوى نموذج DOM وما إلى ذلك. ومع ذلك، هناك مخاوف أمنية بشأن الوصول الكامل إلى صور اللقطات لنموذج DOM. هذا هو السبب الرئيسي لعدم اعتماد المتصفحات الأخرى هذه الميزة.