कंपोजिट ऑपरेशन के साथ प्रयोग करने और कैनवास पर चित्र बनाने के बाद अब मैं चित्रों और कंपोज़िंग को हटाने की कोशिश कर रहा हूँ। मैं यह कैसे करु?
मुझे अन्य छवियों को फिर से दिखाने के लिए कैनवास को साफ करने की आवश्यकता है; यह कुछ समय के लिए चल सकता है इसलिए मुझे नहीं लगता कि हर बार एक नई आयत खींचना सबसे कुशल विकल्प होगा।
जवाबों:
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);context.clearRect(0, 0, context.canvas.width, context.canvas.height)। यह प्रभावी रूप से एक ही चीज है, लेकिन एक कम निर्भरता (2 के बजाय 1 चर)
context.clearRect(0, 0, canvas.width, canvas.height);यह संपूर्ण कैनवास को साफ़ करने का सबसे तेज़ और सबसे वर्णनात्मक तरीका है।
canvas.width = canvas.width;canvas.widthरीसेटिंग सभी कैनवस स्टेट (जैसे ट्रांसफ़ॉर्मेशन, लाइनविद, स्ट्रोकसैल, इत्यादि) को रीसेट करता है, यह बहुत धीमा है (क्लियररिट की तुलना में), यह सभी ब्राउज़रों में काम नहीं करता है, और यह वर्णन नहीं करता है कि आप वास्तव में क्या करने की कोशिश कर रहे हैं।
आप परिवर्तन मैट्रिक्स संशोधित है (उदाहरण के लिए का उपयोग कर scale, rotateया translate) तो context.clearRect(0,0,canvas.width,canvas.height)संभावना कैनवास के पूरे दृश्य भाग स्पष्ट नहीं होंगे।
समाधान? कैनवास को साफ करने से पहले परिवर्तन मैट्रिक्स को रीसेट करें:
// Store the current transformation matrix
context.save();
// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
context.restore();संपादित करें: मैंने अभी कुछ प्रोफाइलिंग की है और (क्रोम में) यह ट्रांसफ़ॉर्म को रीसेट किए बिना 300x150 (डिफ़ॉल्ट आकार) कैनवास को साफ़ करने के लिए लगभग 10% तेज है। जैसे-जैसे आपके कैनवास का आकार बढ़ता है यह अंतर गिरता है।
यह पहले से ही अपेक्षाकृत नगण्य है, लेकिन ज्यादातर मामलों में आप समाशोधन कर रहे हैं की तुलना में आप काफी अधिक ड्राइंग करेंगे और मेरा मानना है कि यह प्रदर्शन अंतर अप्रासंगिक है।
100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clearcanvasचर की आवश्यकता को हटा सकते हैं ctx.canvas।
canvas.widthऔर canvas.heightजब समाशोधन। मैंने परिवर्तन को रीसेट करने की तुलना में रनटाइम अंतर पर कोई संख्यात्मक विश्लेषण नहीं किया है, लेकिन मुझे संदेह है कि यह थोड़ा बेहतर प्रदर्शन होगा।
यदि आप रेखाएँ खींच रहे हैं, तो सुनिश्चित करें कि आप भूल न जाएँ:
context.beginPath();अन्यथा लाइनें साफ नहीं होंगी।
beginPathजब आप एक नया पथ शुरू , कि यह न मानें कि केवल आपके क्योंकि आप अपने मौजूदा रास्ते को साफ करना चाहते हैं और साथ ही साथ कैनवास को साफ़ करना चाहते हैं! यह एक भयानक अभ्यास होगा और ड्राइंग को देखने का एक पिछड़ा तरीका है।
beginPathआपके कैनवास से कुछ भी साफ़ नहीं करता है, यह पथ को रीसेट करता है ताकि आप आकर्षित करने से पहले पिछली पथ प्रविष्टियाँ निकाल दें। आपको शायद इसकी आवश्यकता थी, लेकिन एक ड्राइंग ऑपरेशन के रूप में, एक समाशोधन ऑपरेशन नहीं। स्पष्ट, फिर शुरू और आकर्षित, स्पष्ट नहीं है और शुरू, फिर आकर्षित। क्या फर्क पड़ता है? एक उदाहरण के लिए यहां देखें: w3schools.com/tags/canvas_beginpath.asp
दूसरों ने पहले ही सवाल का जवाब देने के लिए एक उत्कृष्ट काम किया है, लेकिन यदि clear()संदर्भ वस्तु पर एक सरल विधि आपके लिए उपयोगी होगी (यह मेरे लिए था), तो यह कार्यान्वयन है जो मैं यहां उत्तरों के आधार पर उपयोग करता हूं:
CanvasRenderingContext2D.prototype.clear =
CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
if (preserveTransform) {
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);
}
this.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (preserveTransform) {
this.restore();
}
};उपयोग:
window.onload = function () {
var canvas = document.getElementById('canvasId');
var context = canvas.getContext('2d');
// do some drawing
context.clear();
// do some more drawing
context.setTransform(-1, 0, 0, 1, 200, 200);
// do some drawing with the new transform
context.clear(true);
// draw more, still using the preserved transform
};context.clearRect ( x , y , w , h );जैसा कि @ Pentium10 द्वारा सुझाया गया है, लेकिन IE9 इस निर्देश को पूरी तरह से अनदेखा करता है।canvas.width = canvas.width;लेकिन यह लाइनों, आकृति, चित्रों और अन्य वस्तुओं को स्पष्ट नहीं करता है जब तक कि आप पहले चौड़ाई को बदलने के @ जॉन्स ऑलस्कोप के समाधान का उपयोग नहीं करते हैं।तो अगर आपके पास एक कैनवास और संदर्भ इस तरह बनाया गया है:
var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');आप इस तरह से एक विधि का उपयोग कर सकते हैं:
function clearCanvas(context, canvas) {
context.clearRect(0, 0, canvas.width, canvas.height);
var w = canvas.width;
canvas.width = 1;
canvas.width = w;
}context.clearRect(0,0,context.canvas.width,context.canvas.height)।
function clearCanvas(ctx) { ctx.beginPath(); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); }
यह 2018 है और अभी भी रिडरिंग के लिए पूरी तरह से स्पष्ट कैनवास के लिए कोई देशी तरीका नहीं है। कैनवास को पूरी तरह से साफ clearRect() नहीं करता है । गैर-भरण प्रकार के चित्र बाहर नहीं निकाले गए हैं (उदाहरण के लिए rect())
1. पूरी तरह से स्पष्ट कैनवास के बावजूद आप कैसे आकर्षित:
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();पेशेवरों: स्ट्रोक को सुरक्षित रखता है, पूरक, पूरक आदि; कोई अंतराल नहीं;
विपक्ष: अनावश्यक अगर आप पहले से ही कुछ भी ड्राइंग से पहले शुरुआत का उपयोग कर रहे हैं
2. चौड़ाई / ऊंचाई हैक का उपयोग:
context.canvas.width = context.canvas.width;या
context.canvas.height = context.canvas.height;पेशेवरों: आईई विपक्ष के साथ काम करता है: स्ट्रोक स्ट्रोक सेट करें, काले रंग को भरें; laggy;
मैं सोच रहा था कि एक देशी समाधान मौजूद क्यों नहीं है। दरअसल, clearRect()सिंगल लाइन सॉल्यूशन के रूप में माना जाता है क्योंकि ज्यादातर उपयोगकर्ता beginPath()किसी भी नए रास्ते को खींचने से पहले करते हैं । हालांकि शुरुआतपथ का उपयोग केवल रेखाओं को खींचने के लिए किया जाना है और बंद रास्ते की तरह नहींrect().
यही कारण है कि स्वीकृत उत्तर से मेरी समस्या हल नहीं हुई और मैंने अलग-अलग हैक की कोशिश में घंटों बर्बाद कर दिया। लानत है आपको मोज़िला
X, y सह-निर्देशांक और कैनवस की ऊंचाई और चौड़ाई को पार करके क्लियरट्रैक विधि का उपयोग करें। ClearRect पूरे कैनवास को साफ़ करेगा:
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);यहाँ अच्छे उत्तर के एक टन हैं। एक और ध्यान दें कि कभी-कभी यह केवल कैनवास को आंशिक रूप से साफ़ करने के लिए मज़ेदार होता है। वह है, पिछली छवि को पूरी तरह से मिटाने के बजाय "फीका करना"। यह अच्छा ट्रेल्स प्रभाव दे सकता है।
यह आसान है। आपके बैकग्राउंड का रंग सफेद है:
// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);एक त्वरित तरीका है
canvas.width = canvas.widthIdk यह कैसे काम करता है लेकिन यह करता है!
सीमाओं और मैट्रिक्स परिवर्तनों की परवाह किए बिना मैं इसका उपयोग करता हूं:
function clearCanvas(canvas) {
const ctx = canvas.getContext('2d');
ctx.save();
ctx.globalCompositeOperation = 'copy';
ctx.strokeStyle = 'transparent';
ctx.beginPath();
ctx.lineTo(0, 0);
ctx.stroke();
ctx.restore();
}मूल रूप से, यह संदर्भ की वर्तमान स्थिति को बचाता है, और copyजैसा कि एक पारदर्शी पिक्सेल खींचता है globalCompositeOperation। फिर, पिछले संदर्भ स्थिति को पुनर्स्थापित करता है।
यह चार्ट में मेरे पीचार्ट के लिए काम करता है
<div class="pie_nut" id="pieChartContainer">
<canvas id="pieChart" height="5" width="6"></canvas>
</div>
$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the containerमैंने पाया है कि मैं जिन सभी ब्राउज़रों का परीक्षण करता हूं, उनमें से सबसे तेज़ तरीका वास्तव में सफ़ेद, या जो भी आप चाहें रंग भर सकते हैं। मेरे पास बहुत बड़ा मॉनीटर है और फुल स्क्रीन मोड में क्लीयर रेक्टिनेस एग्जिनेटली स्लो है, लेकिन फिल्ट्रेक्ट वाजिब है।
context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);दोष यह है कि कैनवास अब पारदर्शी नहीं है।
वेबकिट में आपको चौड़ाई को एक अलग मूल्य पर सेट करने की आवश्यकता है, फिर आप इसे प्रारंभिक मूल्य पर वापस सेट कर सकते हैं
function clear(context, color)
{
var tmp = context.fillStyle;
context.fillStyle = color;
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.fillStyle = tmp;
}मैं हमेशा उपयोग करता हूं
cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);context.clearRect(0,0,w,h) दिए गए आयत को RGBA मान के साथ भरें:
0 0 0 0: Chrome
0 0 0 255 के साथ: FF & Safari के साथ
परंतु
context.clearRect(0,0,w,h);
context.fillStyle = 'rgba(0,0,0,1)';
context.fillRect(0,0,w,h); आयत को
0 0 0 255 से भरें,
कोई बात नहीं!
सबसे तेज़ तरीका:
canvas = document.getElementById("canvas");
c = canvas.getContext("2d");
//... some drawing here
i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image dataclearRect।
यदि आप केवल क्लियरट्रैक का उपयोग करते हैं, यदि आपके पास अपनी ड्राइंग सबमिट करने के लिए एक फॉर्म है, तो आपको क्लियरिंग के बजाय एक सबमिट मिलेगा, या हो सकता है कि इसे पहले क्लियर किया जाए और फिर एक शून्य ड्राइंग अपलोड किया जाए, इसलिए आपको एक जोड़ना होगा फ़ंक्शन के भीख माँगने पर निवारण
function clearCanvas(canvas,ctx) {
event.preventDefault();
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">आशा है कि यह किसी की मदद करता है।
मैं हमेशा इसका इस्तेमाल करता हूं
ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)ध्यान दें
ClearRect और requestAnimationFrame को संयोजित करना अधिक द्रव एनीमेशन के लिए अनुमति देता है यदि आप यही चाहते हैं
ये सभी महान उदाहरण हैं कि आप मानक कैनवास को कैसे साफ़ करते हैं, लेकिन यदि आप पेपरज का उपयोग कर रहे हैं, तो यह काम करेगा:
जावास्क्रिप्ट में एक वैश्विक चर को परिभाषित करें:
var clearCanvas = false;अपने पेपरस्क्रिप्ट से परिभाषित करें:
function onFrame(event){
if(clearCanvas && project.activeLayer.hasChildren()){
project.activeLayer.removeChildren();
clearCanvas = false;
}
}अब आप जहाँ भी क्लीयरेंस को सच करने के लिए सेट करते हैं, वह स्क्रीन से सभी आइटम्स को क्लियर कर देगा।
clearRectआपके लिए या तो एक अनियंत्रित संदर्भ होना चाहिए, या अपनी वास्तविक सीमाओं का ध्यान रखें।