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

HTML5 कैनवास का उपयोग करके रेखाएं कैसे बनाएं?


HTML5 <कैनवास> टैग का उपयोग स्क्रिप्टिंग का उपयोग करके ग्राफिक्स, एनिमेशन आदि को आकर्षित करने के लिए किया जाता है। यह HTML5 में पेश किया गया एक नया टैग है। HTML5 कैनवास का उपयोग करके रेखाएँ खींचने के लिए lineTo() विधि का उपयोग करें।

HTML5 कैनवास का उपयोग करके रेखाएं कैसे बनाएं?

HTML5 कैनवास का उपयोग करके रेखाएँ कैसे खींचना है, यह जानने के लिए आप निम्न कोड को चलाने का प्रयास कर सकते हैं

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>

   <body>
      <canvas id="newCanvas" width="400" height="300" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');

         // Drawing lines
         ctx.beginPath();
         ctx.moveTo(30, 30);
         ctx.lineTo(180, 100);
         ctx.moveTo(30, 10);
         ctx.lineTo(260, 100);
         ctx.stroke();
      </script>
   </body>
</html>

आउटपुट

HTML5 कैनवास का उपयोग करके रेखाएं कैसे बनाएं?


  1. कैनवास HTML5 का उपयोग करके स्टार कैसे बनाएं?

    HTML कैनवास पर ड्राइंग जावास्क्रिप्ट के साथ की जानी है। कैनवास पर चित्र बनाने से पहले HTML DOM विधि getElementById() और getContext() का उपयोग करें। HTML में एक तारा बनाने के लिए, कैनवास तत्व का उपयोग करें। कैनवास के साथ, तारे को खींचने के लिए lineTo() विधि का उपयोग करें। लाइनटू () पद्धति में x और y

  1. एचटीएमएल कैनवास पर गोलाकार आयत कैसे आकर्षित करें?

    HTML में एक आयत बनाने के लिए, कैनवास तत्व का उपयोग करें। कैनवास के साथ, आयत बनाने के लिए रेक्ट () विधि का उपयोग करें। लेकिन, एक गोल आयत बनाने के लिए, रेक्ट () विधि का उपयोग करने से काम नहीं चलेगा। हम एक गोलाकार आयत बनाने के लिए lineTo() और quadraticCurveTo() पद्धति का उपयोग करेंगे। इस प्रकार आप HTML

  1. HTML5 कैनवास के साथ छवियों का उपयोग कैसे करें?

    HTML5 टैग का उपयोग स्क्रिप्टिंग का उपयोग करके ग्राफिक्स, एनिमेशन आदि को आकर्षित करने के लिए किया जाता है। यह HTML5 में पेश किया गया एक नया टैग है। HTML5 कैनवास वाली छवियों का उपयोग करने के लिए, drawImage() विधि का उपयोग करें। यह विधि दी गई छवि को कैनवास पर खींचती है। HTML कैनवास के साथ छवियों का