सादे पुराने जावास्क्रिप्ट के बजाय <canvas> का उपयोग क्यों करें?

Question

कुछ HTML5 कैनवास डेमो बहुत प्रभावशाली हैं, लेकिन मैं थोड़ा उलझन में हूं। कैनवास तत्व क्या कर सकता है कि नियमित पुराने जेएस/jQuery और CSS3/HTML5 नहीं कर सकते हैं? क्या प्रदर्शन लाभ हैं?

Answer 1

कैनवास जावास्क्रिप्ट की जरूरत है कुछ भी करने को "सादे पुराने जावास्क्रिप्ट" यहाँ सरल उदाहरण देखें:

:

<canvas id='myCanvas' height='200' width='200'><canvas> 

फिर आप उस पर आकर्षित करने के लिए जे एस कोड का उपयोग

var canvas = document.getElementById("myCanvas"); 
    if (canvas.getContext) { 
    var context = canvas.getContext("2d"); 
    context.fillStyle = "rgb(255,0,0)"; 
    context.fillRect (10, 10, 50, 50); 
    } 

इससे पहले कि पूर्व-कैनवास जेएस दिनों में आपको आकार बनाने के लिए एक भरे हुए div का उपयोग करने के लिए स्क्रीन पर ड्राइंग करते समय मजबूर किया गया होगा। एक साधारण आयताकार या वर्ग आसान है, लेकिन एक विकर्ण रेखा को चित्रित करने के लिए एक बहुत सारे पिक्सेल divs और एक सर्कल और भी बदतर की आवश्यकता होगी। ऐसे पुस्तकालय हैं जो Walter Zorn's library की तरह करते हैं, जो काफी पुराना और प्रसिद्ध है। जब तक कि आप कुछ प्राचीन ब्राउज़र का समर्थन नहीं कर रहे हैं, ऐसा लगता है कि यह जाने का उचित तरीका नहीं है।

लोगों का हवाला देते हुए कर रहे हैं आप सबसे ब्राउज़रों में <canvas> चला सकते हैं के रूप में इंटरनेट एक्सप्लोरर जो आप Explorer Canvas इस तरह एक अनुवाद पुस्तकालय की जरूरत है आईई के देशी VML को कैनवास कोड अनुवाद करेगा बचाने के। हालांकि, यह कुछ जटिलता esp के साथ कुछ हद तक समस्याग्रस्त है। आपको अनुवाद करने के लिए आईई के धीमे जेएस कार्यान्वयन पर भरोसा दिलाया गया है।

अन्य वेक्टर ग्राफिक्स विकल्प वर्तमान में नफरत (श्वास) फ्लैश हैं, आईई का वीएमएल सीधे कोड किया गया है और यदि कोई ब्राउज़र इसका समर्थन करता है तो एसवीजी। ऐसे rumblings हैं कि आईई 9 एसवीजी होने जा रहा है जो एक दिलचस्प विकास है।

कैनवास के बारे में अन्य दांतों (हाल ही में फ़्लैश) के बारे में चिंतित होने के बारे में उत्सुकता क्या है, इसकी व्यावहारिक अनुप्रयोग चुनौतियों के बारे में वास्तविक चर्चा की कमी है। कैनवास एक बहुत अच्छा प्रौद्योगिकी है, लेकिन यह 3 महत्वपूर्ण चिंताओं/चुनौतियों है (जरूरी नहीं क्रम में)

1. इसका पाठ समर्थन है बहुत काफ़ी नया तो एक कैनवास केवल में काम करता है पर एक फ़ॉन्ट हो रही नवीनतम सामान (अन्य मामलों में आपको एचटीएमएल/सीएसएस ओवरले की आवश्यकता है) या पर गंदा हैक्स कैनवास पर पत्र फ़ॉर्म खींचें।

2. इंटरएक्टिविटी एक हैक और आधा है। आप एक कैनवास ड्राइंग क्लिक करने योग्य आप एक मढ़ा छवि मानचित्र या div टैग या उपयोग करने के लिए कुछ अखरोट के स्वाद का पिक्सेल नक्शा घटनाओं को पकड़ने और क्या वे मारा पिक्सेल पता लगाना कर मजबूर हैं बनाना चाहते हैं। एक कैनवास छवि प्रदान की गई बिट मैप है और वास्तव में नहीं है जिसका अर्थ है कि लोग चाहते हैं।- "कैनवास बढ़ने नहीं होगा कि क्षमता" पर बेहतर स्किप के किया जा रहा है एसवीजी का उनका उल्लेख http://www.youtube.com/watch?v=AusOPz8Ww80#t=48m54s&feature=player_embedded तत्काल मोड एपीआई कोई "उठा" का अर्थ है: पिछले साल के पर गूगल आई/ओ सम्मेलन कुछ हद तक इस सवाल घड़ी के चारों ओर नृत्य प्रदर्शन उस तकनीक के साथ कंपैट चिंताओं, कम से कम और गैर-उत्तर समाधान में प्रवेश करें।

3. कोई मूल आईई समर्थन नहीं है। क्षमा करें कि अनुवाद लाइब्रेरी प्रदर्शन के अनुसार को किसी भी महत्वपूर्ण और के लिए कटौती नहीं करती है, स्पष्ट रूप से आईई अभी भी एक ब्राउज़र बल चाहे आप इसे पसंद करते हैं या नहीं।

हालांकि, अगर आप एक गैर प्लगइन आधारित ड्राइंग तकनीक लेने के लिए किया है, यहां तक ​​कि आईई compat पुस्तकालय के साथ कैनवास स्पष्ट रूप से वर्ष भर दिया divs की तुलना में बेहतर है जब तक आप प्राचीन ब्राउज़र समर्थन के लिए कुछ की जरूरत है।

Answer 2

हाँ, कैनवास क़ौम बहुत प्रभावशाली हैं। यही कारण है कि आप कैनवास का उपयोग करते हैं। आप कैनवास के साथ कई चीजें कर सकते हैं जिन्हें आप अकेले एचटीएमएल/सीएसएस/जेएस के साथ पूरा नहीं कर सकते। MDC canvas tutorial देखें और देखें कि आप किस उदाहरण के बारे में सोचते हैं कि आप अकेले एचटीएमएल के साथ पूरा कर सकते हैं। किसी भी गैर तुच्छ ग्राफिक्स कि मक्खी (जैसे charts) या इंटरैक्टिव ग्राफ़िक्स (जैसे games) पर प्रदान किया जाना चाहिए कैनवास के लिए एकदम सही अवसर हैं।

आप IE में कुछ और जटिल चित्र या एनिमेशन करने में सक्षम नहीं होंगे, लेकिन excanvas के साथ आप अपने अधिकांश काम किसी भी प्रमुख ब्राउज़र में प्रस्तुत कर सकते हैं।

Answer 3

<canvas>a drawing surface है, इसलिए यह उपयोगी है जब आप अपने खुद के आकार और whatnot आकर्षित करने के लिए चाहते हैं।

इस प्रकार, यह सख्ती से नहीं है जावास्क्रिप्ट "के बदले" - आप JavaScript का उपयोग एक <canvas> टैग पर सामान आकर्षित करने के लिए। आप वास्तव में जावास्क्रिप्ट का उपयोग करके एचटीएमएल पेज पर नहीं आ सकते हैं, बल्कि डीओएम तत्वों में हेरफेर कर सकते हैं - लेकिन यह आपके ड्राइंग की तुलना में अधिक सामान्य रूप से उपयोगी है, क्योंकि आपका प्रश्न पहचानता है।

व्यक्तिगत रूप से, मैं किसी वेब पेज पर एक सर्कल ड्रॉ करने के लिए कोड का एक समूह लिखने से भी बदतर कुछ भी नहीं सोच सकता (मैं एक छवि फ़ाइल बनाने के लिए जीयूआई सॉफ़्टवेयर का उपयोग करता हूं), लेकिन मैं खेल और चार्ट के लिए कल्पना करें तो नियंत्रण का स्तर उपयोगी है। (आप छवि फ़ाइलों में खींच सकते हैं और उन्हें <canvas> पर प्रदान की गई है, इसलिए इसे पसंद तुम सब कुछ आकर्षित करने के लिए होगा नहीं है।)

वहाँ एक ऐसी ही क्या-है-कैनवास-वास्तव में-के लिए प्रश्न यहाँ:

• What are unusual and creative usages of html5 canvas

हो सकता है कि कंपनी लोगो उस पर तैयार किया जा सकता है? एक छवि फ़ाइल की तुलना में जावास्क्रिप्ट कोड का एक बिट डाउनलोड करने के लिए तेज़ हो सकता है।

Answer 4

प्रदर्शन लाभ: यदि आप सिर्फ कुछ है कि HTML/जे एस/सीएसएस ... नहीं, अभी नहीं, और बहुत संभव है विपरीत साथ किया जा सकता का अनुकरण कर रहे हैं। मुझे आश्चर्य नहीं होगा अगर & सर्वर से जीडी छवि वितरित करने में कम समय लगता है, तो यह कुछ ब्राउज़रों में इसे प्रस्तुत करना होगा।

अंतर के लिए ... यह मानक विंडोज जीयूआई फॉर्म को डायरेक्टएक्स की तुलना करने की तरह है। आप सामान्य HTML तत्वों का दुरुपयोग & खींचकर कुछ साफ चाल कर सकते हैं, लेकिन कैनवास पिक्सल पर पूर्ण नियंत्रण है। कि HTML तत्वों नजरअंदाज प्रतिपादन पर पूरा नियंत्रण लेने के लिए एक कोड संपादक, और अंतिम परिणाम लग रहा है और वास्तव में कार्य करता है -

• Bespin: कितना बड़ा सौदा है कि, एक व्यावहारिक और एक कुछ भी लेकिन के एक जोड़े को विशिष्ट उदाहरण एचटीएमएल के दुखी quirks & कोडर के व्यक्तिगत quirks & हैक्स के खिलाफ हैक बिना किसी भी (कैनवास-अनुकूल) प्रणाली पर समान है। यह भी देखें: Bespin and Canvas (अच्छी पढ़ाई!)।

• WebGL - ओपन, 3 डी एपीआई का एक कार्यान्वयन। इसमें सभी गणित फ्रेम बफरिंग & बनावट मैपिंग है जो आप उच्च अंत खेल विकास में अपेक्षा करेंगे।मैं निश्चित रूप से कल्पना नहीं कर सकता कि किसी भी एचडी कंसोल देव ने अपने गेम & उपकरण को जावास्क्रिप्ट में बंद करने के लिए दौड़ते हुए, लेकिन दरवाजा खोलना शुरू कर दिया है।

यह अभी भी है, भी बारीकी से न्यायाधीश करने जैसे HTML 5. से ज्यादातर यह एक या दो साल दे दो बहुत छोटी है, और हम बेहतर पता चल जाएगा कि यह फ्लैश के मुकुट उठाने में सक्षम है या अगर यह सिर्फ VRML की तरह बाहर हो रहा है । तो यह वास्तव में एक या तो या के साथ नहीं है