जावास्क्रिप्ट/jQuery: कैनवास से आकार/पथ हटाएं

मुझे इसे बनाए जाने के बाद कैनवास से आकार या पथ को निकालने के लिए फ़ंक्शन नहीं मिल रहा है।जावास्क्रिप्ट/jQuery: कैनवास से आकार/पथ हटाएं

तो मैं

beginPath(); 
bezierCurveTo(); 
stroke(); 
closePath();

के साथ 2 अंक के बीच एक बेज़ियर वक्र बना रहा हूं मैं एक ही बार यह बनाया गया है कैनवास से निकाल सकते हैं? मुझे हटाए गए फ़ंक्शन को toggle() और blur() के माध्यम से कॉल करने में सक्षम होना चाहिए। मुझे यकीन है कि इसके लिए कुछ मौजूद है ...

किसी भी मदद के लिए अग्रिम धन्यवाद!

स्रोत

2010-04-03 bobsoap

मैं बस उल्लेख करना चाहता था कि 'क्लोजपैथ()' का उपयोग यहां और कई उत्तरों में गलत है। इसका उपयोग पथ की शुरुआत में एक रेखा खींचकर पथ को पूरा करने के लिए किया जाता है। 'स्ट्रोक' के बाद इसे कॉल करना ** बिल्कुल कुछ नहीं है। ** http://stackoverflow.com/questions/10807230/what-exactly-is-a-canvas-path-and-what-is-the-use-of- ctx-closepath –

आप सभी को महान इनपुट के लिए धन्यवाद - यह मेरे समाधान खोजने में मदद की:

context.clearRect(x,y,w,h);

(link)

यह है कि आयत के भीतर कुछ भी साफ हो जाएगा।

मुझे संदर्भ में सहेजने/पुनर्स्थापित करने के लिए आईएलओजी के उत्तर के लिए खुदाई करते समय मिले पृष्ठ पर विधि मिली, और यह सब वहाँ है। एक बार फिर धन्यवाद।

स्रोत

2010-04-03 19:18:46 bobsoap

जहां तक मुझे विनिर्देश याद है, आपको ड्राइंग से पहले context.save() को कॉल करना होगा, फिर कुछ खींचें, और फिर पिछले स्थिति पर वापस जाने के लिए context.restore() को कॉल करें।

स्रोत

2010-04-03 17:25:53 ILog

सुझाव के लिए धन्यवाद - मैंने यह कोशिश की (असफल) और फिर यह संसाधन पाया (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html # द कैनवास-स्टेट) बताते हुए: "वर्तमान पथ और वर्तमान बिटमैप ड्राइंग स्थिति का हिस्सा नहीं है। वर्तमान पथ लगातार है, और केवल startPath() विधि का उपयोग करके रीसेट किया जा सकता है। वर्तमान बिटमैप एक है कैनवास की संपत्ति, संदर्भ नहीं। " वैसे भी धन्यवाद, बहुत सराहना की! – bobsoap

केवल सहेजने/पुनर्स्थापित करने के लिए संदर्भ के कुछ गुणों पर पुनर्स्थापित करें, और उन्हें कॉल करने पर छवि पर कोई प्रभाव नहीं पड़ेगा यदि आप बाद में कुछ नहीं खींचते हैं। [यह आलेख] (http://www.tutorialspoint.com/html5/canvas_states.htm) अधिक जानकारी प्रदान करता है। –

आप कैनवास से पथ/आकार को हटा नहीं सकते हैं। आप इस पर कुछ और खींच सकते हैं या कैनवास साफ़ कर सकते हैं।

स्रोत

2010-04-03 17:33:03 nxt

आप कैनवास के बजाय एसवीजी का उपयोग करने का प्रयास कर सकते हैं। Raphaël नामक एक शानदार लाइब्रेरी है जो एसवीजी के साथ एक हवा के साथ काम करता है। यह आईई 6 सहित सभी ब्राउज़रों में भी काम करता है।

एसवीजी के साथ प्रत्येक आकार का अपना तत्व होता है जिसे स्थानांतरित, परिवर्तित या हटाया जा सकता है।

स्रोत

2010-04-03 18:40:24 bcherry

यह शानदार लग रहा है, मैं इसे पहले से ही देख रहा हूं। धन्यवाद! – bobsoap

यहां एक पूर्वदर्शी टिप्पणी - यदि आप बहुत आकर्षित कर रहे हैं, तो एसवीजी आम तौर पर कैनवास से कम प्रदर्शनकारी होगा। मैं वर्तमान में एक ऐप को दोबारा कर रहा हूं जो कैनवास का उपयोग करने के लिए एसवीजी में बहुत सी ड्राइंग करता है। –

आप JQuery उपयोग कर रहे हैं:

var elem = $("selector"); 
var canvas = elem.get(0); 
var context = canvas.getContext("2d"); 

context.clearRect(0, 0, canvas.width, canvas.height); 
context.beginPath();

बदलें अपने वास्तविक JQuery चयनकर्ता के साथ "चयनकर्ता"।

स्रोत

2011-03-29 11:49:33

अपने कैनवास को स्पष्ट करने के लिए, हमेशा beginPath विधि का उपयोग करें जब आप के बाद आप अपने पथ बना समाप्त हो गया एक नया पथ और closePath विधि आकर्षित करने के लिए शुरू कर रहे हैं निम्नलिखित कोड

canvas_context.clearRect(0,0,canvas_1.width,canvas_1.height);

का उपयोग करें।

नोट:पथ कि बंद नहीं कर रहे हैं साफ़ नहीं किया जा सकता है।

यदि आपके पथ साफ़ नहीं किए जा रहे हैं, तो यह उपर्युक्त कारणों से होना चाहिए।

सभी पथ beginPath() के साथ शुरू और closePath()

उदाहरण के साथ समाप्त होना चाहिए:

 canvas_context.beginPath(); 
    canvas_context.moveTo(x1,y1); 
    canvas_context.lineTo(x2,y2); 
    canvas_context.stroke(); 
    canvas_context.closePath();

निम्नलिखित कोड भी साफ करता है अपने कैनवास

canvas_1.width = canvas_1.width;

नोट:उपरोक्त कथन एक कैनवास को फिर से शुरू करता है इसलिए यह एक कैनवास साफ़ करता है। कोई भी बयान जो कैनवास को पुन: प्रारंभ करता है, एक कैनवास साफ़ करेगा।

स्रोत

2011-07-23 14:07:42

"सभी पथ स्टार्टपाथ() के साथ शुरू होना चाहिए और क्लोजपैथ() के साथ अंत" - गलत! http://stackoverflow.com/questions/10807230/what-exactly-is-a-canvas-path-and-what-is-the-use-of-ctx-closepath –

बस मेरे क्रोम में और फिर से परीक्षण किया गया सही हैं। 2011 में जब मैंने क्रोम में इसका परीक्षण किया था, तो पथ बंद नहीं किए गए थे। वैसे भी, अद्यतन के लिए धन्यवाद। –

<canvas> के बारे में एहसास करना एक महत्वपूर्ण बात है। यह पिक्सल से बना एक चपटा छवि है। एक बार जब कुछ इसे खींचा जाता है, तो यह पिक्सेल ग्रिड में विलय हो जाता है और इसे अन्य पिक्सल से अलग नहीं किया जा सकता है।

आप छवि तत्वों को अलग करने में सक्षम होने की जरूरत है तो आप:

ओवरले परतें के ढेर में <canvas> तत्वों
उपयोग <svg> जिसमें प्रत्येक दृश्य तत्व अन्य तत्वों से अलग है और हो सकता है स्वतंत्र रूप से

चालाकी से आप Photoshop/Gimp/पटाखे में एक परत है, या एक MSPaint दस्तावेज़ होने के रूप में <canvas> के बारे में सोच सकते हैं।

आप इलस्ट्रेटर/इंकस्केप में एक दस्तावेज़ के रूप में <svg> के बारे में सोच सकते हैं।

स्रोत

2012-10-15 13:38:43

इस प्रयास करें:

ctx.save(); 
ctx.globalCompositeOperation = "destination-out"; 
// drawing here you path second time 
ctx.restore();

"globalCompositeOperation विशेषता सेट कैसे आकार और छवियों खरोंच बिटमैप पर तैयार कर रहे हैं" specs

यह कैसे काम करता आप here देख सकते हैं।

स्रोत

2012-12-04 00:24:30 agegorin

जावास्क्रिप्ट/jQuery: कैनवास से आकार/पथ हटाएं

उत्तर

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