HTML5 Canvas-এ কোড্রাটিক কರ್ಭ কীভাবে আঁকবেন?

HTML5 Canvas-এ কোড্রাটিক কর্ভ আঁকার পদ্ধতি

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

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

উদাহরণ

নিচের কোডটি চালিয়ে HTML5 Canvas-এ কোড্রাটিক কর্ভ আঁকতে শিখুন। 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');
      // আকার আঁকুন
      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>

আউটপুট