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

एरिक बिडेलमैन
Twitter GitHub होम पेज

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

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

  1. JS में background-position को अपडेट करने के लिए, सीएसएस स्प्राइट का इस्तेमाल करें .
  2. .toDataURL() के साथ नुस्खे वाले वीडियो .

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

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

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

  1. data: यूआरएल, इमेज को ~33% साइज़ का हिस्सा मानते हैं.
  2. बहुत ज़्यादा DOM को छुएं (el.style).

ये दोनों तरीके कारगर नहीं हैं: किसी 60 FPS (फ़्रेम प्रति सेकंड) तक चलने वाले वेब ऐप्लिकेशन के लिए सही नहीं है.

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

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

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

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

.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() का फिर से इस्तेमाल कर सकते हैं. यह बहुत अच्छी बात है, क्योंकि चीज़ें आपस में जुड़ जाने के बाद, सीएसएस और कैनवस एलिमेंट के बीच का संबंध सुरक्षित रहता है. DOM के साथ फिडल करने की कोई ज़रूरत नहीं है.

क्या Chrome में डेमो ऐनिमेशन नहीं दिया गया है?

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

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

हम यहां कैनवस की बात कर रहे हैं. हार्डवेयर से तेज़ी लाने वाले ऐनिमेशन अब पूरी तरह से काम कर रहे हैं (कम से कम उन ब्राउज़र पर जिनमें यह सुविधा काम करती है). साथ ही, हम यह भी दोहरा रहे हैं कि JS से DOM को खराब करने की ज़रूरत नहीं है.

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

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

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

यहां सिद्धांत का एक सबूत दिया गया है, जिसमें वर्टेक्स और फ़्रैगमेंट शेडर का इस्तेमाल करके एक डीआईवी और उसके बैकग्राउंड को दिखाया गया है: डेमो

अन्य तरीके

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