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

जावास्क्रिप्ट में सर्कल कैसे ड्रा करें?


जावास्क्रिप्ट में सर्कल ड्रा करने के लिए निम्नलिखित कोड है:

उदाहरण

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .circleCanvas {       border: 3px solid #110101;    } </style> </head> <body> <h1>Draw a circle in JavaScript</h1> <canvas class="circleCanvas" width="400" height="200"></canvas><br /> <button class="Btn">CLICK HERE</button> <h3>Click on the above button to create a circle in the above canvas element</h3> <script>    let canvasEle = document.querySelector(".circleCanvas");    let BtnEle = document.querySelector(".Btn");    BtnEle.addEventListener("click", () => {       var circle = canvasEle.getContext("2d");       circle.beginPath();       circle.arc(180, 100, 90, 0, 2 * Math.PI);       circle.stroke();    }); </script> </body> </html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट देगा:

जावास्क्रिप्ट में सर्कल कैसे ड्रा करें?

'CLICK HERE' बटन पर क्लिक करने पर:

जावास्क्रिप्ट में सर्कल कैसे ड्रा करें?


  1. HTML पेज में सर्कल (Circle) कैसे बनाएं? HTML पेज में सर्कल (Circle) कैसे बनाएं?

    HTML पेज में सर्कल बनाने के लिए SVG या कैनवास का उपयोग करें। आप CSS के border-radius प्रॉपर्टी का उपयोग करके भी इसे बना सकते हैं।उदाहरणHTML में सर्कल बनाने का तरीका सीखने के लिए निम्न कोड चलाएं:<!DOCTYPE html> <html>    <head>       <style>   &nb

  1. SVG में खोखला सर्कल (Hollow Circle) कैसे बनाएं? SVG में खोखला सर्कल (Hollow Circle) कैसे बनाएं?

    SVG में खोखला सर्कल बनाने के लिए <circle> एलिमेंट का उपयोग करें। इसके लिए fill=none का उपयोग करें और आउटलाइन बनाएं।उदाहरणSVG में खोखला सर्कल बनाने का तरीका सीखने के लिए निम्न कोड चलाएं:<!DOCTYPE html> <html>    <head>       <title>HTML5 SVG खोखल

  1. Java में OpenCV का उपयोग करके वृत्त कैसे बनाएं? Java में OpenCV का उपयोग करके वृत्त कैसे बनाएं?

    Java OpenCV लाइब्रेरी का org.opencv.imgproc पैकेज Imgproc नामक एक क्लास प्रदान करता है।वृत्त बनाने के लिए, आपको इस क्लास की circle() मेथड को कॉल करना होगा। यह मेथड निम्नलिखित पैरामीटर्स स्वीकार करती है −एक Mat ऑब्जेक्ट जो उस इमेज को दर्शाता है जिस पर वृत्त बनाया जाना है।एक Point ऑब्जेक्ट जो वृत्त के