HTML5 Canvas-এ তারকা কীভাবে আঁকবেন?

HTML5 Canvas-এ তারকা আঁকার পদ্ধতি

HTML Canvas-এ আঁকা হয় JavaScript দিয়ে। Canvas-এ আঁকার আগে HTML DOM মেথড getElementById() এবং getContext() ব্যবহার করতে হয়। HTML-এ তারকা আঁকতে canvas এলিমেন্ট ব্যবহার করা হয়।

Canvas-এ lineTo() মেথড ব্যবহার করে তারকা আঁকা হয়। lineTo() মেথডে x এবং y প্যারামিটার থাকে, যা রেখার অবস্থান নির্ধারণ করে তারকা আঁকতে সাহায্য করে।

HTML ডকুমেন্টে Canvas তৈরি

উদাহরণ

নিচের কোডটি চালিয়ে HTML5 Canvas-এ তারকা আঁকার পরীক্ষা করতে পারেন:

<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML5 Canvas Tag</title>
  </head>
  <body>
    <canvas id="newCanvas" width="300" height="250"></canvas>
    <script>
      var canvas = document.getElementById('newCanvas');
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = "blue";
      ctx.beginPath();
      ctx.moveTo(108, 0.0);
      ctx.lineTo(141, 70);
      ctx.lineTo(218, 78.3);
      ctx.lineTo(162, 131);
      ctx.lineTo(175, 205);
      ctx.lineTo(108, 170);
      ctx.lineTo(41.2, 205);
      ctx.lineTo(55, 131);
      ctx.lineTo(1, 78);
      ctx.lineTo(75, 68);
      ctx.lineTo(108, 0);
      ctx.closePath();
      ctx.fill();
    </script>
  </body>
</html>

আউটপুট

HTML5 Canvas-এ তারকা কীভাবে আঁকবেন?

ব্যাখ্যা: moveTo দিয়ে শুরুর পয়েন্টে যাওয়া হয়, তারপর একাধিক lineTo দিয়ে তারকার প্রতিটি কোণে রেখা আঁকা হয়। closePath() দিয়ে পাথ বন্ধ করা হয় এবং fill() দিয়ে ভরা হয়।