एचटीएमएल 5 कैनवास: ऑब्जेक्ट को फिर से खींचना या बिटमैप्स का उपयोग करना बेहतर है?

Question

मेरी परियोजना में एक HTML5 कैनवास है जिस पर ग्राफिकल ऑब्जेक्ट बार-बार खींचे जाते हैं। ये वस्तुएं तेजी से बदलती हैं। उन्हें आकर्षित करने में समय लगता है। मैं इसे तेजी से कैसे बना सकता हूं?

ऑब्जेक्ट्स अत्यधिक जटिल नहीं हैं लेकिन इसमें arcs, gradients, बहुभुज जैसी चीजें हैं।

किसी ऑब्जेक्ट का स्वरूप लगभग 10 गुणों पर निर्भर करता है जिनमें प्रत्येक के पास लगभग 10 मान होते हैं। इसका मतलब है कि ऑब्जेक्ट की तुलना में केवल 100 अलग-अलग उपस्थितियां हैं। यही कारण है कि मैं केवल एक बार प्रत्येक उपस्थिति को चित्रित करने के बारे में सोच रहा हूं और फिर पुन: उपयोग के लिए बिटमैप कैशिंग कर रहा हूं।

सब कुछ ग्राहक पर काम होने चाहिए (यानी मैं पहले से तैयार छवियों का उपयोग नहीं कर सकते हैं)

1. क्या HTML5 कैनवास के साथ ऐसा करने का सबसे अच्छा तरीका हो सकता है?
2. क्या यह हर समय ऑब्जेक्ट को फिर से खींचने से अधिक बिटमैप्स के साथ काम करने का ऊंचा विचार है या नहीं?

Answer 1

कैश कैश कैश! this article by Simon Sarris, और my own findings देखें। असल में आप स्मृति में एक कैनवास बनाते हैं, वहां सामग्री की प्रतिलिपि बनाते हैं और आप उनका पुन: उपयोग कर सकते हैं। आप इसे करने में भारी प्रदर्शन बढ़ेंगे।

Rotating sprites without caching

Rotating sprites WITH caching

आप 2 उदाहरण में एक सुंदर बड़ा सुधार दिखाई देगा (लाश खोजने के लिए ऊपर की तरफ चलना)।

संपादित

jsfiddle example cached

jsfiddle example not cached

साइमन टिप्पणी में इस पोस्ट है, जो वास्तव में स्पष्ट बातें अगर तुम नहीं निष्पादन लाभ सिर्फ क़ौम को देखकर देख सकते हैं चाहिए।

JSperf findings by Simon Sarris

Answer 2

कितने वस्तुओं एक दूसरे में बदल सकता है, और तदनुसार कितने वस्तुओं आप पुनः बनाने का है और कैसे पर निर्भर करता है - एक ही सेकंड के भीतर, redrawing कैशिंग की तुलना में अधिक काफी एक विकल्प हो सकता है।

सामान्य आधार पर मैं निम्नलिखित निर्णय पथ पर विचार करने का सुझाव दूंगा।

आपने बताया कि आपकी वस्तुओं में से किसी एक के लिए 100 अलग-अलग तरीके हो सकते हैं।

इसे आपकी प्रत्येक ऑब्जेक्ट के लिए कम से कम 99^2 सैद्धांतिक रूप से संभावित स्थिति संक्रमण के समान माना जा सकता है।

क्या ये स्थिति आकार/आकार/रंग में नाटकीय हैं, लेकिन वे अभी भी अच्छी तरह से पहचाने गए, चिह्नित और प्रबंधनीय हैं? यदि ऐसा है, तो आपके सभी ऑब्जेक्ट्स द्वारा 100 अलग-अलग उपस्थितियों का उपयोग करने के बाद केवल एक महत्वपूर्ण प्रदर्शन सुधार हो सकता है।

इसके विपरीत, अगर - उदाहरण के लिए - पृष्ठभूमि शायद ही कभी बदलती है और खींचा हिस्सा ऑब्जेक्ट क्षेत्र का एक कम प्रासंगिक हिस्सा है, तो आप हर बार इसे फिर से लिखने पर गंभीरता से विचार कर सकते हैं।

असल में, एक पूर्व-प्रस्तुत छवि प्रदर्शन के लिए आपकी आवश्यकताओं को पूरा नहीं कर सकती है यदि आपकी खींची गई वस्तु गतिशील रूप से और विशेष रूप से निरंतर आधार पर बदलती है, क्योंकि प्री-रेंडर छवि को प्रत्येक राज्य संक्रमण में पूरी तरह से खींचा जाना आवश्यक है ऑब्जेक्ट का मतलब कम कम्प्यूटेशनल लोड हो सकता है।