ওয়েবসাইটে ইন্টারেক্টিভ এলিমেন্ট যোগ করতে হলে HTML5 ক্যানভাসের ফ্রি লাইব্রেরিগুলো আপনার কাজ সহজ করতে পারে। প্রথমে HTML5-এ ক্যানভাস তৈরির পদ্ধতি জানি।
HTML <canvas> ট্যাগটি স্ক্রিপ্টিং ব্যবহার করে গ্রাফিক্স, অ্যানিমেশন ইত্যাদি আঁকার জন্য ব্যবহৃত হয়। <canvas> ট্যাগ HTML5-এ পরিচিত করা হয়েছিল।
ক্যানভাস তৈরির উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0, 0, 300, 100);
</script>
</body>
</html>
এখন নিচে কিছু ফ্রি লাইব্রেরির নাম দেওয়া হলো যা আপনার ওয়েবসাইটে চমৎকার ইফেক্ট যোগ করতে সাহায্য করবে।
Fabric.js
Fabric.js একটি শক্তিশালী জাভাস্ক্রিপ্ট HTML5 ক্যানভাস লাইব্রেরি, যা ক্যানভাস এলিমেন্টের ওপর ইন্টারেক্টিভ অবজেক্ট মডেল প্রদান করতে ব্যাপকভাবে ব্যবহৃত হয়।
Fabric.js ব্যবহার করে ক্যানভাসে অবজেক্ট তৈরি ও পপুলেট করা যায় — যেমন সিম্পল জ্যামিতিক আকার। আকারগুলোকে গ্রেডিয়েন্ট দিয়ে সাজানো সহজ। টেক্সট সহজে যোগ করা যায় এবং এলাইনমেন্ট, সাইজ ইত্যাদি ডাইনামিকভাবে ম্যানিপুলেট করা যায়।
Paper.js
Paper.js একটি ওপেন সোর্স ভেক্টর গ্রাফিক্স স্ক্রিপ্টিং ফ্রেমওয়ার্ক, যা HTML5 ক্যানভাসের ওপর রান করে।
Paper.js একটি ডকুমেন্ট অবজেক্ট মডেল প্রদান করে, যেটি ব্যবহার করে লেয়ার, গ্রুপ, পাথ ইত্যাদি সহজে তৈরি ও পপুলেট করা যায়। পাথ তৈরি করে সেগমেন্ট যোগ করা যায়। পাথ হলো কGirls দ্বারা সংযুক্ত সেগমেন্টের একটি সিকোয়েন্স।
সেগমেন্টগুলো সহজে ইন্সপেক্ট, ম্যানিপুলেট এবং সরানো যায়। ভেক্টর গ্রাফিক্স SVG-এ ইম্পোর্ট/এক্সপোর্ট করার মেথডও রয়েছে।
Chart.js
Chart.js একটি ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি, যা আপনার ডেটাকে ৮ ভিন্নভাবে ভিজ্যুয়ালাইজ করে। সকল আধুনিক ব্রাউজারে চমৎকার রেন্ডারিং পারফরম্যান্স। উইন্ডো রিসাইজে চার্টগুলো স্বয়ংক্রিয়ভাবে রিড্র করে পেরফেক্ট স্কেল গ্র্যানুলারিটির জন্য।
Chart.js বিল্ট-ইন চার্টগুলো প্রদান করে যা কাস্টম চার্টে সহজে এক্সটেন্ড করা যায়। বিল্ট-ইন চার্টগুলোর মধ্যে রয়েছে — লাইন, বার, হরিজেন্টাল বার, স্ক্যাটার, বাবল ইত্যাদি।
