HTML Canvas-এ বৃত্তাকোণবিশিষ্ট আয়তক্ষেত্র কীভাবে আঁকবেন?

HTML Canvas-এ বৃত্তাকোণবিশিষ্ট আয়তক্ষেত্র আঁকার পদ্ধতি

HTML-এ আয়তক্ষেত্র আঁকতে canvas এলিমেন্ট ব্যবহার করা হয়। Canvas-এ rect() মেথড ব্যবহার করে আয়তক্ষেত্র আঁকা হয়। কিন্তু বৃত্তাকোণবিশিষ্ট আয়তক্ষেত্র তৈরি করতে rect() মেথড কাজ করে না। আমরা lineTo() এবং quadraticCurveTo() মেথড ব্যবহার করে বৃত্তাকোণবিশিষ্ট আয়তক্ষেত্র তৈরি করব।

HTML5-এ Canvas তৈরি

উদাহরণ

নিচের কোডটি চালিয়ে Canvas-এ বৃত্তাকোণবিশিষ্ট আয়তক্ষেত্র তৈরি করতে শিখুন:

<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML5 Canvas Tag</title>
  </head>
  <body>
    <canvas id="newCanvas" width="300" height="150"></canvas>
    <script>
      var canvas = document.getElementById('newCanvas');
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(20, 10);
      ctx.lineTo(80, 10);
      ctx.quadraticCurveTo(90, 10, 90, 20);
      ctx.lineTo(90, 80);
      ctx.quadraticCurveTo(90, 90, 80, 90);
      ctx.lineTo(20, 90);
      ctx.quadraticCurveTo(10, 90, 10, 80);
      ctx.lineTo(10, 20);
      ctx.quadraticCurveTo(10, 10, 20, 10);
      ctx.stroke();
    </script>
  </body>
</html>

আউটপুট

পদ্ধতি ব্যাখ্যা: প্রতিটি কোণে quadraticCurveTo(cpx, cpy, x, y) ব্যবহার করা হয়েছে, যেখানে (cpx, cpy) হলো কন্ট্রোল পয়েন্ট এবং (x, y) হলো এন্ড পয়েন্ট। এতে মসৃণ বৃত্তাকোণ তৈরি হয়।