কম্পিউটার

কিভাবে HTML5 এ একটি বৃত্তাকার গ্রেডিয়েন্ট আঁকতে হয়?


এই পদ্ধতিটি একটি ক্যানভাস গ্রেডিয়েন্ট অবজেক্ট প্রদান করে যা একটি রেডিয়াল গ্রেডিয়েন্টের প্রতিনিধিত্ব করে যা আর্গুমেন্ট দ্বারা উপস্থাপিত বৃত্ত দ্বারা প্রদত্ত শঙ্কু বরাবর পেইন্ট করে। প্রথম তিনটি আর্গুমেন্ট স্থানাঙ্ক (x1,y1) এবং ব্যাসার্ধ r1 সহ একটি বৃত্ত এবং দ্বিতীয়টি স্থানাঙ্ক (x2,y2) এবং ব্যাসার্ধ r2 সহ একটি বৃত্ত সংজ্ঞায়িত করে৷

createRadialGradient(x0, y0, r0, x1, y1, r1)

এখানে createRadialGradient() পদ্ধতির প্যারামিটার মান রয়েছে −

S.No
প্যারামিটার এবং বর্ণনা
1
x0৷ x-coordinate- গ্রেডিয়েন্টের প্রারম্ভিক বিন্দু
2
y0৷ y- স্থানাঙ্ক - গ্রেডিয়েন্টের শুরু বিন্দু
3
r0 প্রারম্ভিক বৃত্তের ব্যাসার্ধ
4
x1৷ x-কোঅর্ডিনেট - গ্রেডিয়েন্টের শেষ বিন্দু
5
y1৷ y- স্থানাঙ্ক - গ্রেডিয়েন্টের শেষ বিন্দু
6 r1 শেষ বৃত্তের ব্যাসার্ধ


কিভাবে HTML5 এ একটি বৃত্তাকার গ্রেডিয়েন্ট আঁকতে হয়?

HTML5 -

-এ রেডিয়াল/বৃত্তাকার গ্রেডিয়েন্ট কীভাবে আঁকতে হয় তা শিখতে আপনি নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন
<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Radial Gradient</title>
   </head>

   <body>
      <canvas id="newCanvas" width="450" height="250" style="border:1px solid
         #d3d3d3;"></canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctxt = c.getContext("2d");
         var linegrd = ctxt.createRadialGradient(75, 50, 5, 90, 60, 100);
         linegrd.addColorStop(0, "#FFFFFF");
         linegrd.addColorStop(1, "#66CC00");
         ctxt.fillStyle = linegrd;
         ctxt.fillRect(20, 10, 200, 150);
      </script>
   </body>
</html>

  1. কিভাবে HTML5 এ strokeText() দিয়ে একটি পাঠ্য আঁকবেন?

  2. কিভাবে HTML5 এ fillText() দিয়ে একটি টেক্সট আঁকবেন?

  3. কিভাবে HTML5 এ আর্ক() দিয়ে একটি বৃত্ত আঁকবেন?

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