यदि हम एक ही एचटीएमएल पेज पर एकाधिक <canvas> का उपयोग करते हैं, तो यह विकसित होने वाले एप्लिकेशन के प्रदर्शन में बाधा डालता है और क्या कोड बहुत भारी हो जाता है और पृष्ठ को लोड करने के लिए अधिक समय की आवश्यकता होती है?एक ही पृष्ठ पर एचटीएमएल 5 एकाधिक कैनवास
कभी-कभी एकाधिक कैनवास बेहतर प्रदर्शन में परिणाम देता है। यदि आप समय बर्दाश्त कर सकते हैं तो परीक्षण करना सबसे अच्छा है।
कहें कि आप एक प्रोग्राम बना रहे हैं जिसमें स्क्रीन पर आइटम हैं और उपयोगकर्ता को चयन बॉक्स खींचने की अनुमति देता है।
एक कैनवास के साथ, चयन बॉक्स को आकर्षित करने के लिए आपको चयन बॉक्स को अपडेट करने के लिए सभी तत्वों को फिर से भरना होगा, क्योंकि उपयोगकर्ता सभी कैनवास पर देखे जाने वाले चयन बॉक्स को अपडेट करते हैं।
या, आपके पास दो कैनवस हो सकते हैं, एक ऑब्जेक्ट्स के साथ और फिर "टूल्स" जैसी चीजों के लिए एक और सामने (जैसे बॉक्स बॉक्स ग्राफिक्स)। यहां दो कैनवास अधिक कुशल हो सकते हैं।
अन्य बार आप ऐसी पृष्ठभूमि चाहते हैं जो बहुत ही कम और अग्रभूमि वस्तुओं को बदलती है जो हर समय बदलती हैं। 60 फ्रेम प्रति सेकेंड पर उन सभी को दोबारा हटाने के बजाय, आप एक पृष्ठभूमि कैनवास और अग्रभूमि कैनवास बनाते हैं, और केवल अग्रभूमि की वस्तुओं को तेज गति से फिर से खींचा जाता है। यहां दो कैनवास एक से अधिक कुशल होना चाहिए, लेकिन यह छवि कैश के रूप में "कैश" के लिए अधिक अनुकूल हो सकता है और छवि को प्रत्येक फ्रेम को चित्रित कर सकता है।
मैंने एक ही पृष्ठ पर दर्जनों कैनवस का उपयोग जावास्क्रिप्ट ग्राफिंग लाइब्रेरी का उपयोग करके विभिन्न ग्राफ प्रदर्शित किए हैं। ग्राफ काफी तेज हैं, यह उनके लिए डेटा एकत्र कर रहा है जो हमारे मामले में थोड़ा धीमा है।
यदि आप चाहते हैं कि आप अपने सभी चित्रों को तब तक करने के लिए प्रतीक्षा कर सकें जब तक कि शेष पृष्ठ onLoad फ़ंक्शन से इसे लात मारकर लोड न हो जाए।
आपने कहा: जावास्क्रिप्ट ग्राफिंग लाइब्रेरी का उपयोग करना। क्या आप मुझे इसका नाम बता सकते हैं? – menardmam
हम कई बार http://www.rgraph.net/ –
एक एकल उदाहरण चिकनी चलता है, अधिक पेज पर प्रतिपादन को प्रभावित नहीं करता है। डेटा कैनवास को धीमा करने का कारक है। पृष्ठ लोडिंग समय बढ़ाने के लिए, आप पेज लोडिंग के बाद कैनवास प्रतिपादन विधियों को आसानी से कॉल कर सकते हैं।
मार्क पिल्ग्रीम के अनुसार, कई कैनवास का उपयोग करना एक अच्छा विचार है।
, कई कैनवस का प्रयोग स्क्रीन के क्षेत्रों अद्यतन करने के लिए अलग और इनपुट ईवेंट को अलग करके आपके अंत पर बातें सरल बना सकते हैं http://diveintohtml5.ep.io/canvas.html#divingin
देखें। यदि आपका पृष्ठ स्क्रीन के विभाजन-अप क्षेत्रों के लिए उपयुक्त है, तो मैं इसके लिए कहता हूं।
मैं इस आलेख में वर्तमान में इस ठोस उद्धरण को नहीं देख सकता, और ग्रेट वेबैक मशीन ने इसे संग्रहीत नहीं किया है :(। इसे समय से हटा दिया गया था? क्यों? –
@ shaman.sir यह यहां उपलब्ध है: http: // web.archive.org/web/20120106035725/http://diveintohtml5.ep.io/canvas.html –
यह एक अच्छा ट्यूटोरियल है, लेकिन मुझे वहां कई कैनवास से संबंधित कोई सामग्री नहीं मिल रही है। –
इसके अलावा, HTML5Rocks says यह एक सर्वोत्तम तरीका है।
का उपयोग कर रहे हैं? फिर किस परिस्थितियों में कई कैनवास का परिणाम खराब प्रदर्शन में होता है? –
अत्यधिक बड़े कैनवास पर 3+ बड़े कैनवास होने की तुलना में सरल पृष्ठभूमि और अग्रभूमि दृश्यों (या उन्हें छवियों में सहेजना) को फिर से निकालना बेहतर हो सकता है। –