खोज…
वाक्य - विन्यास
- शून्य स्पष्ट (x, y, चौड़ाई, ऊंचाई)
- ImageData createImageData (चौड़ाई, ऊँचाई)
टिप्पणियों
यदि इन संदर्भों को alpha: false के साथ बनाया गया था alpha: false तो कोई भी विधि पारदर्शी पिक्सेल का उत्पादन नहीं करेगी alpha: false पैरामीटर।
आयत
आप कैनवास के किसी भी आयताकार खंड को साफ़ करने के लिए clearRect विधि का उपयोग कर सकते हैं।
// Clear the entire canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
नोट:
clearRectपरिवर्तन मैट्रिक्स पर निर्भर है।
इससे निपटने के लिए, कैनवास को साफ़ करने से पहले ट्रांसफ़ॉर्मेशन मैट्रिक्स को रीसेट करना संभव है।
ctx.save(); // Save the current context state
ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset the transformation matrix
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.restore(); // Revert context state including
// transformation matrix
नोट:
ctx.saveऔरctx.restoreकेवल तभीctx.restoreहैं जब आप कैनवास 2 डी संदर्भ स्थिति रखना चाहते हैं। कुछ स्थितियों में बचत और पुनर्स्थापना धीमी गति से हो सकती है और आम तौर पर आवश्यकता न होने पर इसे टाला जाना चाहिए।
कच्चे छवि डेटा
putImageData का उपयोग करके प्रदान की गई छवि डेटा पर सीधे लिखना संभव है। फिर नया इमेज डेटा बनाकर उसे कैनवास पर असाइन करके, आप पूरी स्क्रीन को साफ कर देंगे।
var imageData = ctx.createImageData(canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);
नोट: putImageData संदर्भ पर लागू किसी भी परिवर्तन से प्रभावित नहीं है। यह सीधे प्रदान किए गए पिक्सेल क्षेत्र में डेटा लिखेगा।
जटिल आकार
globalCompositeOperation प्रॉपर्टी को बदलकर जटिल आकार के क्षेत्रों को साफ़ करना संभव है।
// All pixels being drawn will be transparent
ctx.globalCompositeOperation = 'destination-out';
// Clear a triangular section
ctx.globalAlpha = 1; // ensure alpha is 1
ctx.fillStyle = '#000'; // ensure the current fillStyle does not have any transparency
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.lineTo(20, 10);
ctx.fill();
// Begin drawing normally again
ctx.globalCompositeOperation = 'source-over';
ढाल के साथ स्पष्ट कैनवास।
उपयोग के बजाय clearRect जो सभी पिक्सेल पारदर्शी बनाता है आप एक पृष्ठभूमि चाहते हो सकता है।
एक ढाल के साथ साफ करने के लिए
// create the background gradient once
var bgGrad = ctx.createLinearGradient(0,0,0,canvas.height);
bgGrad.addColorStop(0,"#0FF");
bgGrad.addColorStop(1,"#08F");
// Every time you need to clear the canvas
ctx.fillStyle = bgGrad;
ctx.fillRect(0,0,canvas.width,canvas.height);
यह त्वरित रूप के बारे में आधा है 0.008ms रूप clearRect 0.004ms लेकिन एक दूसरे की 4millions नकारात्मक किसी भी वास्तविक समय एनीमेशन प्रभावित नहीं करेगा। (डिवाइस, रिज़ॉल्यूशन, ब्राउज़र और ब्राउज़र कॉन्फ़िगरेशन के आधार पर समय काफी भिन्न होगा। टाइम्स केवल तुलना के लिए हैं)
समग्र ऑपरेशन का उपयोग करके स्पष्ट कैनवास
कंपोजिट ऑपरेशन का उपयोग करके कैनवास को साफ़ करें। इससे कैनवस ट्रांसफ़ॉर्म से स्वतंत्र हो जाएगा लेकिन clearRect() जितना तेज़ नहीं होगा।
ctx.globalCompositeOperation = 'copy';
आगे खींची गई कोई भी चीज़ पिछली सामग्री को साफ़ कर देगी।