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

إيريك بيدلمان

Twitter GitHub الصفحة الرئيسية

الصور الخلفية المتحركة بشكل آلي

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

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. تضيف data: عناوين URL حِملًا زائدًا بنسبة% 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);

ملاحظة: تنطبق هذه الطريقة على الكائن document وليس على لوحة الرسم. الوسيطة الثانية هي الاسم نفسه المستخدَم في -webkit-canvas().

معلومات إضافية من "ديف حياة":

ملاحظة: لا تتوفّر سوى لوحة CSS واحدة لمعرّف عام معيّن لكل مستند. عندما تحصل على سياق الرسم، فإنك تحدد الحجم أيضًا. ولن يتم محو اللوحة ما دمت تطلب المقاس نفسه بشكل متكرّر. يعادل تحديد حجم جديد نوع السلوك الذي تتوقعه في حال تغيير حجم العنصر <canvas>، وبالتالي سيتم محو المخزن المؤقت للوحة الرسم.

ملاحظة: جميع العناصر التي تشاهد لوحة CSS تحمل الاسم نفسه تشارك تلك اللوحة. وهذا يعني أنه (على غرار طريقة عمل صور GIF المتحركة)، يمكنك عمل رسوم متحركة وجعلها تحدث في وضع القفل على جميع عملاء لوحة الرسم. سيتم نشر تغييرات الرسومات لجميع البرامج تلقائيًا.

الصور المتحركة

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

هل الإصدار التجريبي ليس متحركًا في Chrome؟

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

مزايا الأداء

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

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

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

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

إليك الدليل على مفهوم يتضمّن علامة div مع خلفية مرسومة باستخدام أدوات تظليل الأجزاء والرأس: DEMO

مناهج أخرى

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