HTML Canvas strokeRect() मेथड

Canvas strokeRect() मेथड

HTML Canvas का strokeRect() मेथड एक आयत (rectangle) की रूपरेखा (outline) खींचने के लिए उपयोग किया जाता है। <canvas> एलिमेंट JavaScript का उपयोग करके वेब पेज पर ग्राफिक्स खींचने की अनुमति देता है। प्रत्येक कैनवास में दो एट्रिब्यूट होते हैं जो कैनवास की ऊंचाई और चौड़ाई बताते हैं: height और width।

वाक्यविन्यास (Syntax)

context.strokeRect(x, y, width, height);

पैरामीटर

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

उदाहरण

<!DOCTYPE html>
<html>
<body>
  <canvas id="newCanvas" width="550" height="400" style="border: 2px solid orange;"></canvas>
  <script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    ctx.strokeRect(120, 120, 220, 120);
  </script>
</body>
</html>

आउटपुट

एक नारंगी बॉर्डर वाले कैनवास पर (120,120) स्थिति पर 220x120 पिक्सेल का आयत खींचा जाएगा:

कोड स्पष्टीकरण

1. document.getElementById("newCanvas") - कैनवास एलिमेंट प्राप्त करता है।
2. .getContext("2d") - 2D रेंडरिंग कॉन्टेक्स्ट प्राप्त करता है।
3. ctx.strokeRect(120, 120, 220, 120) - (120,120) से शुरू होकर 220 चौड़ा और 120 ऊंचा आयत की रूपरेखा खींचता है।

संबंधित मेथड

• fillRect(x, y, width, height) - भरा हुआ (filled) आयत खींचता है।
• clearRect(x, y, width, height) - आयताकार क्षेत्र साफ़ करता है।
• rect(x, y, width, height) - पथ में आयत जोड़ता है (बाद में stroke() या fill() के साथ)।