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

HTML में स्क्रिप्ट से ग्राफिक्स कैसे बनाएं?

स्क्रिप्ट से ग्राफिक्स बनाने के लिए <canvas> टैग का उपयोग करें। HTML <canvas> टैग स्क्रिप्टिंग का उपयोग करके ग्राफिक्स, एनिमेशन आदि बनाने के लिए है।

<canvas> टैग के निम्न एट्रिब्यूट्स हैं:

एट्रिब्यूट मान विवरण
heightpixelsकैनवास की ऊंचाई निर्दिष्ट करता है
widthpixelsकैनवास की चौड़ाई निर्दिष्ट करता है

उदाहरण

<canvas> टैग लागू करने और ग्राफिक्स बनाने का कोड:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Canvas Tag</title>
  </head>
  <body>
    <canvas id="newCanvas">Your browser does not support canvas tag.</canvas>
    <script>
      var c = document.getElementById('newCanvas');
      var ctx = c.getContext('2d');
      ctx.fillStyle = '#00AEEF';
      ctx.fillRect(0,0,180,50);
    </script>
  </body>
</html>

<canvas> केवल एक कंटेनर है। वास्तविक ड्राइंग JavaScript से getContext('2d') या getContext('webgl') के माध्यम से की जाती है। फॉलबैक कंटेंट (टैग के अंदर) असमर्थित ब्राउज़र्स में दिखता है।

  1. HTML में बिब्लियोग्राफी (ग्रंथ सूची) कैसे बनाएं? HTML में बिब्लियोग्राफी (ग्रंथ सूची) कैसे बनाएं?

    <ol> और <cite> टैग्स का उपयोग बिब्लियोग्राफी (संदर्भ ग्रंथ सूची) बनाने के लिए <ol> से क्रमांकित सूची और <cite> से पुस्तक/कृति का शीर्षक मार्क करें। उदाहरण <!DOCTYPE html> <html> <head> <title>Bibliography</title> </head> <body>

  1. HTML canvas टैग HTML canvas टैग

    HTML में canvas टैग का उपयोग ग्राफिक्स ड्रॉ करने के लिए किया जाता है। ग्राफिक्स ड्रॉ करने के लिए, आपको स्क्रिप्ट का उपयोग करने की आवश्यकता होती है। यह टैग HTML5 में पेश किया गया था। हर कैनवास में दो एलिमेंट्स होते हैं जो कैनवास की ऊंचाई और चौड़ाई का वर्णन करते हैं यानी क्रमशः height और width। निम्न

  1. AutoHotkey के साथ ऐप-विशिष्ट हॉटकी कैसे बनाएं AutoHotkey के साथ ऐप-विशिष्ट हॉटकी कैसे बनाएं

    क्या यह कष्टप्रद नहीं है जब लगभग समान ऐप्स एक ही परिणाम प्राप्त करने के लिए अलग-अलग कुंजी संयोजनों का उपयोग करते हैं? इससे भी बदतर, क्या आप इससे नफरत नहीं करते जब एक सॉफ्टवेयर अस्पष्ट कीबोर्ड शॉर्टकट का उपयोग करने पर जोर देता है बिना उन्हें रीमैप करने का विकल्प प्रदान किए? क्या यह बहुत अच्छा नहीं हो