কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে সার্কেল আঁকা


নিচে জাভাস্ক্রিপ্টে সার্কেল আঁকার কোড দেওয়া হলো:

উদাহরণ

<!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>জাভাস্ক্রিপ্টে সার্কেল আঁকা</h1> <canvas class="circleCanvas" width="400" height="200"></canvas><br /> <button class="Btn">এখানে ক্লিক করুন</button> <h3>উপরোক্ত বাটনে ক্লিক করে উপরের ক্যানভাস এলিমেন্টে সার্কেল তৈরি করুন</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>

আউটপুট

উপরোক্ত কোড নিচের আউটপুট দেবে:

জাভাস্ক্রিপ্টে সার্কেল আঁকা

‘এখানে ক্লিক করুন’ বাটনে ক্লিক করলে –

জাভাস্ক্রিপ্টে সার্কেল আঁকা


  1. HTML5-এ সার্কুলার গ্রেডিয়েন্ট (Circular Gradient) আঁকা

  2. HTML পেজে বৃত্ত কীভাবে আঁকবেন?

  3. SVG-এ ফাঁকা বৃত্ত কীভাবে আঁকবেন?

  4. জাভা ওপেনসিভি (OpenCV) ব্যবহার করে বৃত্ত আঁকার পদ্ধতি