एचटीएमएल 5 कैनवास

Question

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

आदर्श रूप में, मैं मिटाना नियंत्रण पिक्सेल को काले पारदर्शी में बदलना चाहता हूं। मैं बस ऐसा करने के लिए लाइन का उपयोग नहीं कर सकता क्योंकि, जाहिर है, यह सिर्फ उस पर एक काला पारदर्शी रेखा खींचता है, और यह मूल डूडल को छूता है। इसे कैसे करना है इस पर कोई आइडिया?

धन्यवाद।

Answer 1

आप एक काले रंग की पारदर्शी स्ट्रोक आकर्षित करने के लिए चाहते हैं, तो आप शायद चाहते हैं:

context.globalCompositeOperation = "destination-out"; 
context.strokeStyle = "rgba(0,0,0,1)"; 

पिछले globalCompositeOperation को बचाने के लिए और फिर बाद में इसे फिर से स्थापित या पारदर्शिता याद रखें

दुनिया में सबसे अधिक सहायक संदर्भ ठीक से काम नहीं करेगा!

Answer 2

अगर आपका इरेज़र एक आयत है तो clearRect में देखें। विनिर्देश के अनुसार, clearRect फ़ंक्शन, आयत पारदर्शी काला में पिक्सेल बना देगा, जैसा आप चाहते हैं।

यदि आप अन्य इरेज़र आकार [यानी: सर्कल?] चाहते हैं तो आपको पिक्सेल डेटा में हेरफेर करना होगा। ध्यान दें कि यदि आप पंख-जैसी इरेज़र चाहते हैं, तो यह नरक हो जाता है। http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

Answer 3

ध्यान दें कि फ़ायरफ़ॉक्स 3.6/4.0 पूरी पृष्ठभूमि को मिटाकर 'प्रतिलिपि' लागू करें। डब्ल्यू 3 सी डॉक्स इस बारे में स्पष्ट नहीं हैं कि यहां क्या होना चाहिए। क्रोम (वेबकिट?) चश्मे को 'केवल जहां पिक्सेल वास्तव में खींचा जाता है' के रूप में व्याख्या करता है, उदाहरण के लिए स्ट्रोक() का परिणाम।

"आरजीबीए (255,255,255,1.0)" के साथ गंतव्य-आउट, पृष्ठभूमि को पारदर्शी रूप से सेट करता है जहां फ्रेमबफर में पिक्सल पारदर्शी नहीं होते हैं। क्रोम और फ़ायरफ़ॉक्स दोनों में पारदर्शी पृष्ठभूमि छोड़ना।

स्थानीय पृष्ठ को स्थानीय रूप से कॉपी करें, और नीले रंग के बॉक्स और लाल वृत्त के लिए विभिन्न रंगों/क्षमताओं के साथ खेलें, और पृष्ठ के पृष्ठभूमि रंग को गैर-सफेद बनाने के लिए मत भूलना! और

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

आप ब्राउज़रों बेतहाशा अलग हैं मिल जाएगा।