এইচটিএমএল ৫ গ্রাফিক্স পরিচিতি

এইচটিএমএলের ৫.০ সংস্করণএ <svg> এবং <canvas> ট্যাগ ব্যবহার করে ওয়েব পেজে গ্রাফিক্স তৈরি করা যায়। এ দুটি বরতমানে বেস জনপ্রিয় এবং সর্ব সমর্থিত।

SVG

এসভিজি এর পূর্ণরুপ হল Scalable Vector Graphics, ওয়েব এ গ্রাফিক্স নির্ধারণ করতে এসভিজি ব্যবহার করা হয়।

<svg width="100" height="100"> 

  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 

</svg>

কোড এডিটর

Canvas

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

<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>

কোড এডিটর

ক্যানভাস এবং SVG এর পার্থক্য

এসভিজি হল দ্বি মাত্রিক গ্রাফিক্সকে এক্সএমএল এ বর্ণনা করার একটি ভাষা এর ক্যানভাস হল জাভাস্ক্রিপ্ট ব্যবহার করে দ্বি মাত্রিক গ্রাফিক্স অংকন করার একটি পদ্ধতি।

এসভিজি এক্সএমএল ভিত্তিক, যার অর্থ হল প্রতিটি উপাদান SVG DOM এর মধ্যে পাওয়া যায়। আপনি একটি উপাদান জন্য জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারেন।
এসভিজিতে, প্রতিটি অঙ্কিত আকৃতি একটি বস্তুর হিসাবে মনে করা হয়। যদি একটি SVG বস্তুর বৈশিষ্ট্যাবলী পরিবর্তন করা হয়, ব্রাউজার স্বয়ংক্রিয়ভাবে আকৃতিটি পুনরায় উৎপাদন করতে পারে। ক্যানভাস প্রতি পিক্সেলে পিক্সেলে অংকিত হত। ক্যানভাসে, একবার গ্রাফিকটি টানা হয়ে গেলে, তারপর ব্রাউজার তা ভুলে যায়। যদি এর অবস্থান পরিবর্তন করার প্রয়োজন হয়, তাহলে পুরো দৃশ্যটি পুনঃনির্ধারণ করতে হবে, তখন গ্রাফিক দ্বারা আচ্ছাদিত যে কোনও বস্তুও অন্তর্ভুক্ত করবে।