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

HTML कैनवास भरणRect () विधि

<घंटा/>

वेब पेज पर एक भरा हुआ आयत बनाने के लिए HTML कैनवास की fillRect () विधि का उपयोग किया जाता है। डिफ़ॉल्ट रंग काला है। <कैनवास> तत्व आपको जावास्क्रिप्ट का उपयोग करके वेब पेज पर ग्राफिक्स बनाने की अनुमति देता है। प्रत्येक कैनवास में दो तत्व होते हैं जो कैनवास की ऊंचाई और चौड़ाई का वर्णन करते हैं अर्थात क्रमशः ऊंचाई और चौड़ाई।

निम्नलिखित वाक्य रचना है -

context.fillRect(p,q,width,height);

ऊपर,

  • p :आयत के ऊपरी-बाएँ कोने का x-निर्देशांक
  • q :आयत के ऊपरी-बाएँ कोने का y-निर्देशांक
  • चौड़ाई :आयत की चौड़ाई
  • ऊंचाई :आयत की ऊँचाई

आइए अब कैनवास की fillRect () विधि को लागू करने के लिए एक उदाहरण देखें−

उदाहरण

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;">
</canvas>
<script>
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   ctx.fillStyle = "blue";
   ctx.fillRect(0, 0, 500, 350);
   ctx.clearRect(250, 100, 50, 100);
</script>
</body>
</html>

आउटपुट

HTML कैनवास भरणRect () विधि


  1. एचटीएमएल डोम कैनवास वस्तु

    HTML DOM कैनवास ऑब्जेक्ट HTML5 में पेश किए गए तत्व से जुड़ा है। जावास्क्रिप्ट की मदद से ग्राफिक्स बनाने के लिए टैग का उपयोग किया जाता है। कैनवास ग्राफिक्स के लिए एक कंटेनर के रूप में कार्य करता है। कैनवास पर, हम रेखाएँ, आकृतियाँ आदि बना सकते हैं। गुण कैनवास ऑब्जेक्ट के लिए निम्नलिखित गुण हैं - सं

  1. HTML डोम createEvent () विधि

    HTML DOM createEvent () विधि का उपयोग एक ईवेंट ऑब्जेक्ट बनाने के लिए किया जाता है जिसका प्रकार पैरामीटर में निर्दिष्ट किया जाएगा। बनाए गए ईवेंट का उपयोग करने से पहले इसे प्रारंभ किया जाना चाहिए। किसी HTML तत्व को ईवेंट भेजने के लिए आपको उस निर्दिष्ट नोड पर डिस्पैचइवेंट () विधि का उपयोग करना होगा। सि

  1. एचटीएमएल डोम getNamedItem () विधि

    HTML DOM getNamedItem () विधि का उपयोग किसी दिए गए नाम के साथ विशेषता नोड को NamedNodeMap ऑब्जेक्ट के रूप में प्राप्त करने के लिए किया जाता है। उस विशिष्ट विशेषता नोड को प्राप्त करने के लिए हमें इस विधि को केवल विशेषताएँ गुण पर कॉल करना होगा क्योंकि विशेषता गुण एक सूची देता है जिससे हम getNamedItem(