HTML5 Canvas-এ বেজিয়ার কর্ভ কীভাবে আঁকবেন?

HTML5 Canvas-এ কিউবিক বেজিয়ার কর্ভ আঁকার পদ্ধতি

HTML5 <canvas> ট্যাগ ব্যবহার করে স্ক্রিপ্টিং দিয়ে গ্রাফিক্স, অ্যানিমেশন ইত্যাদি আঁকা হয়। এটি HTML5-এ নতুন যোগ করা একটি ট্যাগ। Canvas এলিমেন্টের একটি DOM মেথড আছে getContext, যা রেন্ডারিং কনটেক্সট এবং এর ড্রইং ফাংশনগুলো প্রাপ্ত করে। এই ফাংশনটি একটি প্যারামিটার নেয়—কনটেক্সটের টাইপ 2d।

HTML5 Canvas-এ বেজিয়ার কর্ভ আঁকতে bezierCurveTo() মেথড ব্যবহার করা হয়। এই মেথড প্রদত্ত পয়েন্টটি বর্তমান পাথে যোগ করে, যা পূর্ববর্তী পয়েন্টের সাথে একটি কিউবিক বেজিয়ার কর্ভের মাধ্যমে সংযুক্ত থাকে এবং দুটি কন্ট্রোল পয়েন্ট থাকে।

উদাহরণ

নিচের কোডটি চালিয়ে HTML5 Canvas-এ বেজিয়ার কর্ভ আঁকতে শিখুন। bezierCurveTo() মেথডে x এবং y প্যারামিটারগুলো এন্ডপয়েন্টের কোঅর্ডিনেট। cp1x এবং cp1y হলো প্রথম কন্ট্রোল পয়েন্টের কোঅর্ডিনেট, আর cp2x এবং cp2y হলো দ্বিতীয় কন্ট্রোল পয়েন্টের কোঅর্ডিনেট।

<!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');
      ctx.beginPath();
      ctx.moveTo(75,40);
      ctx.bezierCurveTo(75,37,70,25,50,25);
      ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
      ctx.bezierCurveTo(20,80,40,102,75,120);
      ctx.bezierCurveTo(110,102,130,80,130,62.5);
      ctx.bezierCurveTo(130,62.5,130,25,100,25);
      ctx.bezierCurveTo(85,25,75,37,75,40);
      ctx.fill();
    </script>
  </body>
</html>

আউটপুট

প্রমুখ পার্থক্য: কোড্রাটিক কর্ভে একটা কন্ট্রোল পয়েন্ট থাকে, কিন্তু কিউবিক বেজিয়ার কর্ভে দুটি কন্ট্রোল পয়েন্ট থাকে, যা কর্ভের আকৃতি আরও জটিল ও লچকদার করে তোলে।