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

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

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

  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. डीओएम को बार-बार अपडेट किया जा रहा है (el.style).

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

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

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

पता चला है कि 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, कैनवस के लिए सिर्फ़ एक 3D कॉन्टेक्स्ट है. बस "2d" के बजाय "experimental-webgl" डालें और देखें कि क्या होता है.

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

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

अन्य तरीके

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