Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

এইচটিএমএল৫ ক্যানভাস HTML5 Canvas


Your browser does not support the HTML5 canvas tag. Your browser does not support the HTML5 canvas tag.

কোন ওয়েব পেজে গ্রাফিক্স অংকন করার জন্য এইচটিএমএল ৫ এর <canvas> এলিমেন্ট ব্যবহার করা হয়।
উপরে কতগুল গ্রাফিক্স প্রদর্শিত হয়েছে, যেগুলো <canvas> এলিমেন্ট ব্যবহার করে তৈরি করা হয়েছে।


এইচটিএমএল ক্যানভাস কি?

কোন ওয়েব পেজে এইচটিএমএল৫ এর <canvas> এলিমেন্ট ব্যবহার করে জাভাস্ক্রিপ্টের মাদ্ধমে গ্রাফিক্স অংকন করা জায়। । <canvas> এলিমেন্ট হল গ্রাফিক্সের জন্য সুধুমাত্র একটি ধারক বা container. কোন গ্রাফিক্স অংকন করতে হলে অবসসয় জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। বক্স, বৃত্ত, টেক্সট বা কন ছবি যুক্ত করার জন্য ক্যানভাসের বিভিন্ন মেথড রয়েছে।


ব্রাউজার সাপোর্ট

টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে <canvas> এলিমেন্ট সমর্থন বা support করে।

এলিমেন্ট
<canvas> 4.09.02.03.19.0


ক্যানভাসের উদাহরন

ক্যানভাস হল কোন এইচটিএমএল পেজে একটি আয়তকার ক্ষেত্র। সয়ঙ্ক্রিও ভাবে, একটি ক্যানভাসে কোন বর্ডার এবং কোন কন্টেন্ট থাকে না। নিচে ক্যানভাস এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

<canvas id="id_name" width="value" height="value"></canvas>
 

নোট - সব সময় একটি আইডি আত্ত্রিবুত নির্ধারণ করুন, যেই আইডি ধরে স্ক্রিপ্টে কল করা হবে। এর সাথে একটি width এবং height আত্ত্রিবুত ও নির্ধারণ করুন যা ক্যানভাস এর আকার নির্ধারণ করবে।

নিচে ক্যানভাস এর একটি উদাহরন দেখুন।

ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।

উদাহরণ


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #999999;"> 
</canvas>

কোড এডিটর



ক্যানভাসে কোন রেখা অংকন করা

নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে একটি রেখা অংকন করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।

উদাহরণ


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.</canvas>
  <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(200,100);
  ctx.stroke();
</script>

কোড এডিটর



কানভাসে বৃত্ত অংকন করা

নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে এইচটিএমএল কোড ব্যাবহার করে একটি বৃত্ত অংকন করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।

উদাহরণ


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.</canvas>
  <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();
</script>

কোড এডিটর



কানভাসে টেক্সট লেখা

নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে এইচটিএমএল কোড ব্যাবহার করে একটি ক্যানভাসে কিছু লেখা বা text প্রদর্শন করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।

উদাহরণ


<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #d3d3d3;">
<script>
var c = document.getElementById("myCanvas3");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("WebsSchool",10,50);
</script>

কোড এডিটর



ক্যানভাসে স্ট্রোক স্টাইলের টেক্সট

নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে এইচটিএমএল কোড ব্যাবহার করে একটি স্ট্রোক স্টাইলের লেখা বা text প্রদর্শন করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।

উদাহরণ


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.</canvas>
  <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.strokeText("WebsSchool",10,50);
</script>

কোড এডিটর



ক্যানভাসে লিনিয়ার গ্রাডিয়েন্ট

নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে এইচটিএমএল কোড ব্যাবহার করে লিনিয়ার গ্রাডিয়েন্ট তৈরি করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।

উদাহরণ


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.</canvas>
  <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  // Create gradient
  var grd = ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"white");
  // Fill with gradient
  ctx.fillStyle = grd;
  ctx.fillRect(10,10,150,80);
</script>

কোড এডিটর



ক্যানভাসে Circular গ্রাডিয়েন্ট

নিচে ক্যানভাসের জন্য কিছু এইচটিএমএল কোডের একটি উদাহরন দেখুন, যেখানে Circular গ্রাডিয়েন্ট তৈরি করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।

উদাহরণ


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.</canvas>
  <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  // Create gradient
  var grd = ctx.createRadialGradient(75,50,5,90,60,100);
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"white");

  // Fill with gradient
  ctx.fillStyle = grd;
  ctx.fillRect(10,10,150,80);
</script>

কোড এডিটর


এইচটিএমএল এর canvas সম্পর্কে জানতে Mozilla Developer এর Canvas API ওয়েব পেজটি ব্রাউজ করুন।

এইচটিএমএল এর canvas সম্পর্কে জানতে Whatwg এর The canvas element ওয়েব পেজটি ব্রাউজ করুন।