एचटीएमएल 5 पर स्पष्ट लाइन कैनवास

Question

क्या कोई लाइन अनस्ट्रोक करने का कोई तरीका है? मेरे कैनवास पर मेरे पास अस्पष्टता 0.5 और 20 पिक्सल की चौड़ाई वाली रेखा है, मान लीजिए। अब मैं इसे और अधिक बनाना चाहता हूं, इसका मतलब है कि पुराने लाइन से बाहर एक और रेखा खींचें। ऐसा करने पर, पुरानी और नई लाइनों के बीच मिलान बिंदु कम पारदर्शी हो जाते हैं (क्योंकि वे अब दो पंक्तियों से बने होते हैं)। इसलिए मैं पुरानी रेखा को अनस्ट्रोक करना चाहता हूं और फिर नया स्ट्रोक करना चाहता हूं।

मैं यह कैसे कर सकता हूं?

धन्यवाद

Answer 1

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

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

तो एक स्ट्रोक CPU/GPU समय की बहुत बचत हो सकती है पूर्ववत करने में सक्षम है, लेकिन भारी स्मृति

Answer 2

मुझे लगता है सबसे आसान तरीका है बस पूरे कैनवास (clearRect का प्रयोग करके) स्पष्ट करने के लिए और सिर्फ पूरे रेखा खींचना फिर

Answer 3

clearRect() यह करने के लिए एक ही रास्ता है किया जाएगा। इस के आसपास काम करने का एक अच्छा तरीका (यदि आपके कैनवास पर बहुत सारे तत्व खींचे गए हैं) तो "स्थैतिक" ड्राइंग के लिए एक का उपयोग करके और "ड्राइंग के लिए शीर्ष परत" का उपयोग करके, पूर्ण स्थिति का उपयोग करके HTML में दो कैनवास ओवरले करना है साफ़/redraw करने के लिए। यह सीपीयू समय को आपके सभी कैनवास को फिर से खींचता है।

Answer 4

एक और सुरुचिपूर्ण विकल्प 'XOR' को 'globalCompositeOperation' सेट और आप फिर से लाइन पेंट करने के लिए है वृद्धि whould किया जाना है। ... तो इसे