कैनवस से चलने वाली बैकग्राउंड इमेज

प्रोग्राम के हिसाब से बैकग्राउंड इमेज में ऐनिमेशन जोड़ना

लोग बैकग्राउंड इमेज को दो मुख्य तरीकों से ऐनिमेट करते हैं:

  1. जेएस में background-position को अपडेट करने के लिए, सीएसएस स्प्राइट का इस्तेमाल करें .
  2. .toDataURL() के साथ हैक्स .

अगर आपके पास इमेज पहले से मौजूद है, तो पहला तरीका सबसे अच्छा है. हालांकि, अगर आपके सोर्स को प्रोग्राम के हिसाब से जनरेट करना है, तो क्या होगा? जैसे, <canvas> से जनरेट करना है? पहली समस्या को हल करने के लिए, कैनवस पर .toDataURL() का इस्तेमाल करें और जनरेट किए गए यूआरएल को बैकग्राउंड के तौर पर सेट करें:

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

इसमें दो समस्याएं हैं:

  1. data: यूआरएल जोड़ने से, इमेज का साइज़ करीब 33% बढ़ जाता है.
  2. डीओएम में कई बदलाव किए गए हैं (el.style).

ये दोनों तरीके सही नहीं हैं. वेब ऐप्लिकेशन के लिए, हमेशा 60fps का इस्तेमाल करना ज़रूरी है.

बैकग्राउंड के तौर पर 2D कैनवस का इस्तेमाल करना

बैकग्राउंड के तौर पर कैनवस का डेमो
DEMO

दरअसल, एक नॉन-स्टैंडर्ड एपीआई है, जो WebKit के पास कई सालों से है. यह बैकग्राउंड के सोर्स के तौर पर कैनवस का इस्तेमाल कर सकता है. हालांकि, अफ़सोस की बात यह है कि इस सुविधा के लिए कोई स्पेसिफ़िकेशन पब्लिश नहीं किया गया है.

सबसे पहले, वापस जाने के लिए यूआरएल तय करने के बजाय:

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

कैनवस के कॉन्टेक्स्ट के लिए स्ट्रिंग आइडेंटिफ़ायर का रेफ़रंस देने वाले -webkit-canvas() का इस्तेमाल करें:

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

इसके बाद, हमें .getContext() के खास वर्शन के साथ 2D कॉन्टेक्स्ट बनाना होगा:

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

डेव हयात से मिली ज़्यादा जानकारी:

ऐनिमेशन

डेमो में दिखाया गया है कि ऐनिमेशन चलाने के लिए, हम requestAnimationFrame() का फिर से इस्तेमाल कर सकते हैं. यह बहुत अच्छी बात है, क्योंकि एक बार कनेक्ट होने के बाद, सीएसएस और कैनवस एलिमेंट के बीच का जुड़ाव बना रहता है. डीओएम में बदलाव करने की ज़रूरत नहीं होती.

क्या Chrome में डेमो ऐनिमेट नहीं हो रहा है?

Chrome के मौजूदा स्टेबल चैनल (वर्शन 23) में crbug.com/161699 मौजूद है. इसकी वजह से, requestAnimationFrame() ऐनिमेशन, बैकग्राउंड को सही तरीके से अपडेट नहीं कर पाता. इस समस्या को Chrome 25 में ठीक कर दिया गया है. फ़िलहाल, यह कैनरी वर्शन में उपलब्ध है. डेमो को भी Safari के मौजूदा वर्शन में ठीक से काम करना चाहिए.

परफ़ॉर्मेंस के फ़ायदे

यहां हम कैनवस की बात कर रहे हैं. हार्डवेयर की मदद से तेज़ी से रेंडर होने वाले ऐनिमेशन अब पूरी तरह से काम कर रहे हैं. हालांकि, यह सुविधा सिर्फ़ उन ब्राउज़र में काम करती है जिनके लिए इसे बनाया गया है. हम आपको फिर से बता दें कि JS से DOM में बदलाव करने की ज़रूरत नहीं है.

बैकग्राउंड के तौर पर webgl का इस्तेमाल करना

एक सेकंड रुकें. क्या इसका मतलब यह है कि हम WebGL का इस्तेमाल करके, सीएसएस बैकग्राउंड को पावर दे सकते हैं? ज़रूर! WebGL, कैनवस के लिए सिर्फ़ एक 3D कॉन्टेक्स्ट है. बस "2d" की जगह "experimental-webgl" का इस्तेमाल करें और हो गया.

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

यहां कॉन्सेप्ट का एक सबूत दिया गया है. इसमें एक div है, जिसका बैकग्राउंड वर्टेक्स और फ़्रैगमेंट शेडर का इस्तेमाल करके बनाया गया है: DEMO

अन्य तरीके

यह ध्यान देने वाली बात है कि Mozilla के पास -moz-element() (MDN) का मालिकाना हक काफ़ी समय से है. यह सीएसएस इमेज वैल्यू और बदले गए कॉन्टेंट मॉड्यूल लेवल 4 स्पेसिफ़िकेशन का हिस्सा है. इससे आपको किसी भी एचटीएमएल से जनरेट की गई इमेज बनाने की सुविधा मिलती है: वीडियो, कैनवस, DOM कॉन्टेंट,... हालांकि, डीओएम की स्नैपशॉट इमेज का पूरा ऐक्सेस होने से सुरक्षा से जुड़ी समस्याएं हो सकती हैं. इस वजह से, अन्य ब्राउज़र ने अब तक इस सुविधा को नहीं अपनाया है.