কম্পিউটার

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


HTML5 ট্যাগটি স্ক্রিপ্টিং ব্যবহার করে গ্রাফিক্স, অ্যানিমেশন ইত্যাদি আঁকতে ব্যবহৃত হয়। এটি HTML5 এ প্রবর্তিত একটি নতুন ট্যাগ। ক্যানভাস উপাদানটিতে getContext নামে একটি DOM পদ্ধতি রয়েছে, যা রেন্ডারিং প্রসঙ্গ এবং এর অঙ্কন ফাংশন প্রাপ্ত করে। এই ফাংশনটি একটি প্যারামিটার নেয়, প্রসঙ্গ 2d এর ধরন।

HTML5 ক্যানভাসের সাথে একটি দ্বিঘাত বক্ররেখা আঁকতে, quadraticCurveTo() পদ্ধতিটি ব্যবহার করুন৷ এই পদ্ধতিটি প্রদত্ত বিন্দুটিকে বর্তমান পথের সাথে যুক্ত করে, প্রদত্ত নিয়ন্ত্রণ বিন্দুর সাথে একটি চতুর্মুখী বেজিয়ার বক্ররেখা দ্বারা পূর্ববর্তীটির সাথে সংযুক্ত।

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

HTML5 ক্যানভাসে একটি দ্বিঘাত বক্ররেখা কীভাবে আঁকতে হয় তা শিখতে আপনি নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন। quadraticCurveTo() পদ্ধতিতে x এবং y পরামিতি হল শেষ বিন্দুর স্থানাঙ্ক। cpx এবং cpy হল কন্ট্রোল পয়েন্টের স্থানাঙ্ক।

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>

   <body>
      <canvas id="newCanvas" width="500" height="300" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');

         // Draw shapes
         ctx.beginPath();
         ctx.moveTo(75,25);
         ctx.quadraticCurveTo(25,25,25,62.5);
         ctx.quadraticCurveTo(25,100,50,100);
         ctx.quadraticCurveTo(50,120,30,125);
         ctx.quadraticCurveTo(60,120,65,100);
         ctx.quadraticCurveTo(125,100,125,62.5);
         ctx.quadraticCurveTo(125,25,75,25);
         ctx.stroke();
      </script>
   </body>
</html>

আউটপুট

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


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

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

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

  4. এইচটিএমএল ক্যানভাস বেজিয়ার কার্ভ আঁকতে