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

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

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

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);

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

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

كما هو موضّح في العرض التوضيحي، يمكننا إعادة استخدام 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. ولهذا السبب، لم تعتمد المتصفّحات الأخرى هذه الميزة المذكورة في المقام الأول.