কোন ওয়েব পেজে গ্রাফিক্স অংকন করার জন্য এইচটিএমএল ৫ এর <canvas> এলিমেন্ট ব্যবহার করা হয়।
উপরে কতগুল গ্রাফিক্স প্রদর্শিত হয়েছে, যেগুলো <canvas> এলিমেন্ট ব্যবহার করে তৈরি করা হয়েছে।
কোন ওয়েব পেজে এইচটিএমএল৫ এর <canvas> এলিমেন্ট ব্যবহার করে জাভাস্ক্রিপ্টের মাদ্ধমে গ্রাফিক্স অংকন করা জায়। । <canvas> এলিমেন্ট হল গ্রাফিক্সের জন্য সুধুমাত্র একটি ধারক বা container. কোন গ্রাফিক্স অংকন করতে হলে অবসসয় জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। বক্স, বৃত্ত, টেক্সট বা কন ছবি যুক্ত করার জন্য ক্যানভাসের বিভিন্ন মেথড রয়েছে।
টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে <canvas> এলিমেন্ট সমর্থন বা support করে।
এলিমেন্ট | |||||
---|---|---|---|---|---|
<canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.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>
নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে একটি রেখা অংকন করা হয়েছে।
ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।
<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>
নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে এইচটিএমএল কোড ব্যাবহার করে একটি বৃত্ত অংকন করা হয়েছে।
ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।
<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 প্রদর্শন করা হয়েছে।
ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।
<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 প্রদর্শন করা হয়েছে।
ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।
<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>
নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে এইচটিএমএল কোড ব্যাবহার করে লিনিয়ার গ্রাডিয়েন্ট তৈরি করা হয়েছে।
ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।
<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 গ্রাডিয়েন্ট তৈরি করা হয়েছে।
ওপরের উদাহরনটির জন্য নিচের এইচটিএমএল কোড গুলো ব্যাবহার করুন।
<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 ওয়েব পেজটি ব্রাউজ করুন।