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

एचटीएमएल 5 कैनवास में अंडाकार कैसे आकर्षित करें?


आप HTML5 कैनवास में अंडाकार बनाने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं -

उदाहरण

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
      <canvas id="newCanvas" width="450" height="300"></canvas>
      <script>
         // canvas

         var c = document.getElementById('newCanvas');
         var context = c.getContext('2d');
         var cX = 0;
         var cY = 0;
         var radius = 40;
         
         context.save();
         context.translate(c.width / 2, c.height / 2);
         context.scale(2, 1);
         context.beginPath();
         context.arc(cX, cY, radius, 0, 2 * Math.PI, false);
         context.restore();
         context.fillStyle = '#000000';
         context.fill();
         context.lineWidth = 2;
         context.strokeStyle = 'yellow';
         context.stroke();
      </script>
   </body>
</html>

आउटपुट

एचटीएमएल 5 कैनवास में अंडाकार कैसे आकर्षित करें?


  1. HTML5 SVG में आयत कैसे बनाएं?

    एसवीजी स्केलेबल वेक्टर ग्राफिक्स के लिए खड़ा है और एक्सएमएल में 2डी-ग्राफिक्स और ग्राफिकल अनुप्रयोगों का वर्णन करने के लिए एक भाषा है और एक्सएमएल को एसवीजी व्यूअर द्वारा प्रस्तुत किया जाता है। अधिकांश वेब ब्राउज़र एसवीजी प्रदर्शित कर सकते हैं जैसे वे पीएनजी, जीआईएफ, और जेपीजी प्रदर्शित कर सकते हैं।

  1. एचटीएमएल 5 कैनवास पर एसवीजी फाइल कैसे बनाएं?

    एसवीजी को कैनवास पर खींचने के लिए, आपको एसवीजी छवि का उपयोग करना होगा। सबसे पहले, तत्व का उपयोग करें जिसमें HTML शामिल है। उसके बाद, आपको एसवीजी छवि को कैनवास में खींचना होगा। उदाहरण HTML कैनवास पर SVG फ़ाइल बनाने के लिए आप निम्न कोड आज़मा सकते हैं <!DOCTYPE html> <html>    

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

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