2011-09-27 14 views
5
this.context.drawImage(myimage, 0, 0); 

कैनवास पर छवि डालने से पूरे वेब पर बहुत अच्छी तरह से कवर किया गया है। लेकिन इसके बाद मैं इसे कैसे हटा सकता हूं?एचटीएमएल कैनवास से किसी छवि को कैसे निकालना, छिपाना, निकालना या हटाना है?

+3

एचटीएमएल 5 कैनवास को उचित रूप से नामित किया गया है क्योंकि यह लगभग वास्तविक कैनवास की तरह व्यवहार करता है, आप वहां पर सामान (रेंडर) कर सकते हैं लेकिन आप इसे हटा नहीं सकते हैं। आप इसे किसी अन्य छवि के साथ पेंट कर सकते हैं, आप उस छवि को प्रस्तुत करने वाले पिक्सल को साफ़ कर सकते हैं, या आप कैनवास को पूरी तरह से साफ़ कर सकते हैं। यह स्टैक ओवरफ्लो उत्तर दिखाता है कि छवि को केवल पिक्सल को कैसे साफ़ किया जाए, http://stackoverflow.com/questions/3458244/removing-an-image-from-a-canvas-in-html5 – kreek

+0

Thx। अब "[html5] [कैनवास] निकालने" के लिए खोज परिणामों में यह प्रश्न क्यों नहीं दिखाई दिया? यह खोजता है कि यदि आप खोज क्वेरी में "निकालना" जोड़ते हैं, लेकिन थोड़े को यह जानने की आवश्यकता है कि इसे कैसे ढूंढें, यह जानने के लिए विषय पंक्ति क्या है। –

उत्तर

4

विकल्प 1:
पृष्ठभूमि के समान रंग के आयत पर एक आयताकार बनाएं।

विकल्प 2 (गैर तुच्छ पृष्ठभूमि के लिए काम करता है, लेकिन धीमी):
कैनवास से Get the pixel data छवि निकालने से पहले, तो उस पिक्सेल डेटा पुनः बनाने चित्र निकालने के लिए।

+0

मैं एक "रेड्रा" दिनचर्या के साथ चला गया हूं जो पूरे कैनवास को साफ़ करता है और फिर से चलाता है क्योंकि यह एनिमेटेड या विशेष रूप से भूख सामग्री नहीं है। –

10

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

आपको इसके लिए खोज करने में कठिन समय था क्योंकि कैनवास के लिए "हटाने" जैसी कोई चीज़ नहीं है। यह सब जानता है कि इसमें से कुछ रंगों के कुछ पिक्सल हैं। यह पता नहीं है कि कहां है।

थोड़ा आसान बनाने के लिए, वहाँ आम तौर पर कर रहे हैं दो तरीके:

  1. साफ पूरे कैनवास, और एक छवि को छोड़कर फिर से सब कुछ आकर्षित आप तैयार
  2. उपयोग दो कैनवस नहीं करना चाहते, एक है कि केवल छवि और एक अन्य सभी चीजों के साथ एक है। ClearRect (0,0, चौड़ाई, ऊंचाई) के साथ इस कैनवास को साफ़ करें और आप कर चुके हैं।

आपको 1 में नोटिस होगा कि आपको शायद उन चीज़ों का ट्रैक रखना शुरू करना होगा जिन्हें आप कैनवास पर आकर्षित करते हैं यदि आप उनमें से कुछ को चुनिंदा रूप से हटाया या पुनर्स्थापित करना चाहते हैं। ऑब्जेक्ट दृढ़ता को स्थापित करना, या फिर एक सतत ड्राइंग सतह से एक सतत ड्राइंग सतह से कैनवास मोड़ना, कुछ ऐसा है जो कैनवास पुस्तकालयों का बहुत कुछ करता है। यदि आप इसे स्वयं करना चाहते हैं, तो मैंने लोगों को शुरू करने में सहायता के लिए कुछ tutorails लिखा है।

यदि आप पुस्तकालयों में देखना चाहते हैं, तो easel.js पर एक नज़र डालें। यह बहुत सीखने योग्य है।

2

तो मैं अपने कैनवास को साफ़ करने के लिए एक त्वरित और आसान तरीका के साथ आया। मैंने अपने <canvas> टैग को आईडी के साथ <p> टैग के बीच में रखा है, फिर हर बार जब मुझे अपने कैनवास साफ़ करने की आवश्यकता होती है तो मैंने innerHTML को बदलकर अपने <p> टैग को फिर से प्रस्तुत किया, एक आकर्षण की तरह काम करता है।

संबंधित मुद्दे