Canvas clearRect() मेथड
clearRect() मेथड HTML Canvas में निर्दिष्ट आयताकार क्षेत्र के पिक्सल्स को साफ़ (clear) करता है, जिससे वह क्षेत्र पारदर्शी (transparent) हो जाता है। यह एनिमेशन, गेम डेवलपमेंट और डायनामिक ग्राफिक्स में फ्रेम दर फ्रेम कैनवास को साफ़ करने के लिए आवश्यक है।
सिंटैक्स
ctx.clearRect(x, y, width, height);
पैरामीटर्स
- x: साफ़ करने वाले आयत के ऊपरी-बाएँ कोने का x-निर्देशांक
- y: साफ़ करने वाले आयत के ऊपरी-बाएँ कोने का y-निर्देशांक
- width: साफ़ करने वाले आयत की चौड़ाई
- height: साफ़ करने वाले आयत की ऊँचाई
उदाहरण: कैनवास का एक भाग साफ़ करना
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="350" style="border:2px solid blue;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, 500, 350); // पूरा कैनवास ग्रे भरें
ctx.clearRect(250, 100, 50, 100); // केंद्र में 50x100 क्षेत्र साफ़ करें
</script>
</body>
</html>
आउटपुट
एक ग्रे कैनवास जिसके केंद्र में एक पारदर्शी आयताकार क्षेत्र होगा।
उपयोग के मामले
- एनिमेशन लूप में पिछले फ्रेम को साफ़ करना
- इरेज़र टूल कार्यान्वित करना
- डायनामिक चार्ट्स अपडेट करना
- गेम में स्प्राइट्स की पिछली स्थिति मिटाना
