কম্পিউটার

ক্যানভাস HTML5 ব্যবহার করে কিভাবে একটি তারকা আঁকা?


এইচটিএমএল ক্যানভাসে অঙ্কন জাভাস্ক্রিপ্ট দিয়ে করতে হবে। ক্যানভাসে আঁকার আগে HTML DOM পদ্ধতি getElementById() এবং getContext() ব্যবহার করুন। HTML এ একটি তারকা আঁকতে, ক্যানভাস উপাদান ব্যবহার করুন।

ক্যানভাসের সাথে, একটি তারকা আঁকতে lineTo() পদ্ধতি ব্যবহার করুন। lineTo() পদ্ধতিতে x এবং y প্যারামিটার মান রয়েছে, যা আপনাকে অঙ্কন করতে সাহায্য করার জন্য লাইনগুলিকে অবস্থান করে।

HTML নথিতে ক্যানভাস আঁকতে:

ক্যানভাস HTML5 ব্যবহার করে কিভাবে একটি তারকা আঁকা?

উদাহরণ

আপনি HTML5 ক্যানভাস ব্যবহার করে একটি তারকা আঁকার জন্য নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন

<!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 ব্যবহার করে কিভাবে একটি তারকা আঁকা?


  1. ক্যানভাস HTML5 ব্যবহার করে কিভাবে একটি তারকা আঁকা?

  2. কিভাবে HTML ক্যানভাসে একটি বৃত্তাকার আয়তক্ষেত্র আঁকতে হয়?

  3. কিভাবে HTML5 ক্যানভাস দিয়ে ছবি ব্যবহার করবেন?

  4. কিভাবে HTML5 এ lineTo() দিয়ে একটি লাইন আঁকবেন?