में पिछली खींची गई वस्तु को हटाएं मेरे पास एक पॉलीगॉन ऑब्जेक्ट (एक कार कहें) है जो एचटीएमएल 5 कैनवास के अंदर खींची गई है moveTo और lineTo। मैं उस ऑब्जेक्ट को कैनवास में अलग-अलग स्थितियों पर बार-बार आकर्षित करना चाहता हूं (एक चलती वस्तु को अनुकरण करना)। मेरी समस्या यह है कि पिछली खींची गई वस्तु को मंजूरी नहीं मिल रही है। इसके बजाय, कैनवास पर कई छवियां खींची जाती हैं। मैं इस समस्या को कैसे हल कर सकता हूं?एचटीएमएल 5 कैनवास
कैनवस सिर्फ पिक्सल के सरणियों हैं, वे आकार आप तैयार की है की कुछ भी नहीं पता।
एनीमेशन ट्रिक्स हैं जो बिटमैपड डिस्प्ले (उदाहरण के लिए "xor drawing") पर उपयोग किए जाने के लिए उपयोग किए जाते हैं जिनका उपयोग नए आकार को खींचने से पहले पुराने आकार को हटाने के लिए किया जा सकता है, लेकिन आधुनिक मशीनों पर यह आमतौर पर बहुत सरल है (और पूरी तरह से तेज़) केवल कैनवास मिटाएं और प्रत्येक फ्रेम के लिए फिर से शुरू करें।
अन्य उत्तरों को आपकी टिप्पणियों को देखते हुए, मैं केवल दो कैनवास का उपयोग करने का सुझाव दूंगा - एक स्थिर पृष्ठभूमि के लिए और एक कार के लिए। यदि पृष्ठभूमि छवि स्थिर है तो यह कैनवास के बजाय <img> तत्व भी हो सकती है।
यदि कार छवि स्थिर है तो आप इसे एक बार भी खींच सकते हैं, और फिर प्रत्येक फ्रेम के लिए पृष्ठभूमि से संबंधित अपनी स्थिति सेट करने के लिए सीएसएस स्थिति का उपयोग कर सकते हैं।
@OP आप अलग-अलग कैनवास तत्वों पर पृष्ठभूमि और ओवरले भी खींच सकते हैं और उन्हें अपने एनीमेशन पाश के अंत में वापस मर्ज कर सकते हैं। – rlemon
@ ड्रमोन को उन्हें मर्ज करने की कोई ज़रूरत नहीं है - सीएसएस पोजिशनिंग के साथ आप लेयरिंग पर अन्य – Alnitak
अच्छी कॉल के शीर्ष पर केवल एक प्राप्त कर सकते हैं। – rlemon
आप हर के शुरू में कैनवास खाली करने के लिए है आकर्षित फ्रेम
context.clearRect(0, 0, canvas.width, canvas.height);
यह मेरे अन्य पृष्ठभूमि डेटा को भी साफ़ कर देगा .. मुझे केवल कार ऑब्जेक्ट को हटाने की आवश्यकता है जिसे मैं दोहरा रहा हूं – Anish
हां, आप पृष्ठभूमि के साथ-साथ कार को अपनी नई स्थिति में फिर से खींचना होगा। वैकल्पिक रूप से, यदि आप पृष्ठभूमि नहीं ले जाते हैं, तो आप सीधे अपने कैनवास के नीचे एक छवि को ले जा सकते हैं। इस तरह आपको हर बार पृष्ठभूमि को फिर से नहीं लेना पड़ेगा - बस चलती कार को फिर से खींचा जाए। – markE
क्या आप कुछ कोड पोस्ट कर सकते हैं? – Tom
निकटता से संबंधित: [मैं HTML कैनवास में पुराने जेनरेट किए गए तत्वों का संदर्भ कैसे प्राप्त करूं?] (Http://stackoverflow.com/q/13973747/710446) – apsillers
मैंने इस SO प्रश्न का उत्तर देने के लिए एक पहेली बना दी: http: // stackoverflow .com/q/16728162/2252829। बेवकूफ में मेरे पास दो कैनवस हैं, एक स्थिर वस्तुओं के लिए और दूसरा गतिशील के लिए। उपयोगी हो सकता है। [जेएसफ़िल्ड लिंक] (http://jsfiddle.net/gfcarv/N22Na/) –