Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML Canvas fill() मेथड: वर्तमान पथ भरना

Canvas fill() मेथड

fill() मेथड HTML Canvas में वर्तमान ड्राइंग पथ (path) को भरता है। डिफ़ॉल्ट भराव रंग काला (#000000) है। पथ beginPath(), rect(), arc(), lineTo() आदि से बनाया जाता है।

सिंटैक्स

ctx.fill();

उदाहरण: हरा आयत भरना

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="450" height="250" style="border:2px solid blue;">
    आपका ब्राउज़र HTML5 canvas टैग सपोर्ट नहीं करता।
  </canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.rect(50, 60, 300, 200);  // आयत पथ बनाएं
    ctx.fillStyle = "green";     // भराव रंग सेट करें
    ctx.fill();                  // पथ भरें
  </script>
</body>
</html>

आउटपुट

नीले बॉर्डर वाले कैनवास पर (50,60) स्थिति पर 300x200 का हरा भरा आयत।

मुख्य बिंदु

  • fillStyle प्रॉपर्टी से रंग, ग्रेडिएंट, या पैटर्न सेट करें
  • fill() वर्तमान पथ को भरता है और पथ को रीसेट नहीं करता
  • बाद में stroke() कॉल करके आउटलाइन भी बना सकते हैं
  • पथ बंद होना चाहिए (closePath() स्वतः कॉल होता है)

fillStyle विकल्प

ctx.fillStyle = "red";              // CSS रंग नाम
ctx.fillStyle = "#ff0000";          // हेक्स रंग
ctx.fillStyle = "rgb(255,0,0)";     // RGB
ctx.fillStyle = gradient;           // ग्रेडिएंट ऑब्जेक्ट
ctx.fillStyle = pattern;            // पैटर्न ऑब्जेक्ट
  1. HTML DOM removeChild() मेथड HTML DOM removeChild() मेथड

    removeChild() मेथड क्या है? DOM removeChild() मेथड किसी निर्दिष्ट पैरेंट नोड से एक चाइल्ड नोड को हटाता है और हटाए गए चाइल्ड नोड को लौटाता है। यह DOM ट्री को मैनिपुलेट करने का एक मौलिक मेथड है। सिंटैक्स parentNode.removeChild(childNode) पैरामीटर childNode: हटाने के लिए चाइल्ड नोड (पैरेंट का सीध

  1. HTML DOM Canvas ऑब्जेक्ट HTML DOM Canvas ऑब्जेक्ट

    HTML DOM Canvas ऑब्जेक्ट HTML5 में पेश किए गए <canvas> एलिमेंट से जुड़ा होता है। <canvas> टैग का उपयोग JavaScript की मदद से ग्राफिक्स ड्रॉ करने के लिए किया जाता है। कैनवास ग्राफिक्स के लिए एक कंटेनर के रूप में कार्य करता है। कैनवास पर हम लाइन्स, शेप्स आदि ड्रॉ कर सकते हैं।प्रॉपर्टीज (Pro

  1. HTML Canvas मूल बातें HTML Canvas मूल बातें

    वेब पेज पर कैनवास ड्रा करने के लिए, HTML5 canvas एलिमेंट का उपयोग करें। <canvas> एलिमेंट आपको JavaScript का उपयोग करके ग्राफिक्स ड्रा करने की अनुमति देता है। Canvas के साथ, एक लाइन, आयत, बेजियर कर्व्स आदि ड्रा करें। हर कैनवास के दो एलिमेंट्स होते हैं जो कैनवास की ऊंचाई और चौड़ाई का वर्णन करते