এইচ টি এম এল ৫ ক্যানভাস টিউটোরিয়াল-(ড্রইং কৌশল)

এইচ টি এম এল এর সর্বশেষ সংস্করণটি হচ্ছে এইচ টি এম এল-৫, যা পূর্ববর্তী সংস্করণ থেকে অনেক বেশি সমৃদ্ধ।বর্তমানে এইচ টি এম এল-৫ শুধুমাত্র ওয়েব সাইটের গঠন তৈরির মধ্যে সীমাবদ্ধ নেই, এর ক্যানভাস ইলিমেন্টের অসাধারণ গ্রাফিক্স ডিজাইন এবং এনিমেশন তৈরির সক্ষমতা ইতোমধ্যেই পৃথিবীর ওয়েব ডিজাইনারদের কাছে প্রশংসিত হয়েছে।

এই টিউটোরিয়ালে এইচ টি এম এল-৫ এর ক্যানভাস ইলিমেন্ট এবং এর মাধ্যমে বিভিন্ন ধরণের ড্রইং তৈরির কৌশল সম্পর্কে আলোচনা করা হয়েছে।

পূর্ব প্রস্তুতি

এইচ টি এম এল ৫ শেখার জন্য অবশ্যই এইচটি এম এল ৪ সম্পর্কে ভাল ধারণা থাকতে হবে এবং পাশাপাশি সি এস এস এবং জাভাস্ক্রিপ্টের বেসিক জ্ঞান প্রয়োজন হবে। এজন্য টিউটো হোস্টের এইচ টি এম এল বাংলা টিউটোরিয়াল, সি এস এস বাংলা টিউটোরিয়াল এবং জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল সমূহের সাহায্য নিতে পারেন।

এইচ টি এম এল ৫ এর নতুন সংযোজিত বিষয় সমূহ প্রদর্শনের জন্য মজিলা, অপেরা, অ্যাপল এর সাফারি, গুগল ক্রোম এর সর্বশেষ ভার্সন সমূহের মধ্যে থেকে অন্তত যে কোন একটি ব্রাউজার ব্যবহার করতে হবে।একাধিক ব্রাউজার ব্যবহার করলে ভাল। এক্ষেত্রে বিভিন্ন ইলিমেন্টের ব্রাউজার কমপাটিবিলিটি সম্পর্কে ভাল ধারণা তৈরি হবে। মজিলা এবং গুগল ক্রোম আমার কাছে সবচেয়ে বেশি গ্রহণযোগ্য মনে হয়।

……………………………………………………………………………………

যে কোন ড্রইং তৈরির ক্ষেত্রে সর্বপ্রথম কাজ হচ্ছে ক্যানভাস ডিজাইন করা।এজন্য এইচ টি এম এল-৫ এ <canvas id=”myCanvas” width=”570″ height=”370″></canvas> এর অনুরূপ <canvas> ট্যাগ ব্যবহার করা হয়।width=”570″ height=”370″ এর মাধ্যমে ক্যানভাসটির উচ্চতা 370 পিক্সেল এবং চওড়া 570 পিক্সেল নির্ধারণ করা হয়েছে। ক্যানভাস ইলিমেন্ট বা ক্যানভাস ট্যাগ <canvas></canvas> অন্যান্য এইচ টি এম এল ট্যাগ যেমন <div> <p> ইত্যাদির মতই কাজ করে কিন্তু পার্থক্য হচ্ছে এর কনটেন্ট সমূহ জাভাস্ক্রিপ্টের সাহয্য নিয়ে এক্সিকিউট হয়।

[sourcecode language=”html”]
var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(‘2d’);

[/sourcecode]

উপরের কোডটুকু যুক্ত করা হয় ক্যানভাস DOM অবজেক্টকে id দ্বারা একসেস করার জন্য। এখানে <canvas></canvas> এর জন্য id=” myCanvas ” দ্বারা myCanvas নামে id তৈরি করা হয়েছে।

[sourcecode language=”html”]

<canvas id="”myCanvas”" width="”570″" height="”370″"></canvas>
var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(‘2d’);

[/sourcecode]

লাইন ড্রইং

কোন লাইন ড্রইং করার জন্য নুন্যতম নিচের কোডংশটুকু যুক্ত করতে হয়।

[sourcecode language=”html”]

<script type="text/javascript">// <![CDATA[
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x,y);
ctx.stroke();
// ]]></script>

[/sourcecode]

  • এইচ টি এম এল-৫ এর মাধ্যমে লাইন ড্রইং করার জন্য beginPath() মেথড ব্যবহার করে প্রথমে একটা পাত তৈরি করা হয়।
  • moveTo()মেথড ব্যবহার করে একটা বিন্দু নির্দেশ করা হয়, যে বিন্দুতে পাতটিকে স্থানান্তর বা move করা হয়।
  • lineTo()মেথড ব্যবহার করে পাতের বর্তমান অবস্থান থেকে একটা নির্দিষ্ট বিন্দু পর্যন্ত লাইন তরি করা হয়।
  • stroke()মেথড ব্যবহার করে পাতটিকে প্রদর্শন করা হয়। এছাড়া পাতের পুরুত্ব এবং কালার নির্ধারণের জন্যও stroke()মেথড ব্যবহার করা হয়।

লাইন ড্রইং প্রজেক্ট


একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করে ব্রাউজারে দেখতে পারেন। এছাড়া আমাদের এডিটরে প্রদর্শিত কোড আপনার ইচ্ছা অনুযায়ী পরিবর্তন করে আউটপুট দেখতে পারেন।

কোড পর্য়ালোচনা

উপরের কোডে ctx.moveTo(20, 30); তে 20, 30 প্রকাশ করে ক্যানভাসের সর্ববামে এবং উপরের দিকে কর্ণার থেকে X অক্ষ বরাবর 20 একক এবং Y অক্ষ বরাবর 30 একক দূরে পাতটিকে move করা হয়েছে। অর্থাৎ লাইনটি শুরু হবে ঐ বিন্দু থেকে।

উপরের কোডে ctx.lineTo(400, 150); প্রকাশ করে পাতের বর্তমান অবস্থান অর্থাৎ 20, 30 বিন্দু থেকে একটা লাইন শুরু হয়ে ক্যানভাসের সর্ববামে এবং উপরের দিকে কর্ণার থেকে X অক্ষ বরাবর 400 একক এবং Y অক্ষ বরাবর 150 একক দূরে যে বিন্দুটি সেখানে গিয়ে লাইনটি শেষ হবে।

লাইনের পুরুত্ব বৃদ্ধি করা এবং কালার করার পদ্ধতি

stroke()মেথড ব্যবহার করে লাইনের পুরুত্ব এবং কালার নির্ধারণ করা যায়। আমরা যে লাইনটি তৈরি করেছি তার পুরুত্ব বৃদ্ধি করার জন্য ctx.stroke(); এর ঠিক আগে ctx.lineWidth = 5; এর অনুরূপ যুক্ত করতে হবে। এখানে 5 পরিবর্তে যে কোন সংখ্যা ব্যবহার করা যাবে এবং সংখ্যার মান বাড়ালে পুরুত্ব বাড়বে।


পুরুত্ব বৃদ্ধি করার অনুরূপ লাইনটিকে কালার করার জন্য পূর্বে কোডে ctx.stroke(); এর আগে ctx.strokeStyle = ‘#f64dd3’; এর অনুরূপ যুক্ত করতে হবে। এখানে #f64dd3 এর পরিবর্তে যে কোন কালার কোড ব্যবহার করা যাবে এবং কালার কোড অনুসারে কালার হবে ।


লাইনে লাইনক্যাপ যুক্ত করার পদ্ধতি

পুরুত্ব বৃদ্ধি এবং কালার করার অনুরূপ লাইনটিতে লাইন ক্যাপ যুক্ত করার জন্য পূর্বে কোডে ctx.stroke(); এর আগে ctx.lineCap = ’round’; এর অনুরূপ যুক্ত করতে হবে। এখানে round এর পরিবর্তে যে square এবং butt ব্যবহার করা যাবে। এখানে butt হচ্ছে ডিফল্ট, অর্থাৎ লাইন ক্যাপ ব্যবহার না করলে যেমনটা দেখাবে।


কোড পর্য়ালোচনা

মাঝের লাইনটি তুলনামূলক ছোট দেখাচ্ছে কারণ এটাতে ctx.lineCap = ‘butt’; যুক্ত থাকায় কোন লাইন ক্যাপ যুক্ত হয়নি কিন্তু শেষের লাইনটিতে ctx.lineCap = ‘square’; থাকায় স্কয়ার লাইন ক্যাপ যুক্ত হয়েছে তাই দুইটা দেখতে একই রকম হলেও শেষের লাইনটা দৈর্ঘ্যে বৃদ্ধি পেয়েছে।

বর্গক্ষেত্র তৈরির প্রজেক্ট এবং ক্লোজ পাত

closePath() মেথড ব্যবহার করে লাইন ড্রইং এর মাধ্যমে একটা বর্গক্ষেত্র তৈরি করা যায় এবং fill() মেথড ব্যবহার করে এর অভ্যন্তর কালার করা যায়।


কোড পর্য়ালোচনা

প্রথমে ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); এর মাধ্যমে একটা লাইন তৈরি করা হয়েছে।এরপর প্রথম লাইনটা যেখানে শেষ হয়েছে সেখান থেকে ctx.lineTo(150, 150); এর মাধ্যমে 150, 150 পর্যন্ত দ্বিতীয় লাইন তৈরি করা হয়েছে, একইভাবে ৩য় লাইন তৈরি করে ctx.closePath(); এর মাধ্যমে বর্গক্ষেত্রটি সম্পন্ন করা হয়েছে।

ctx.fillStyle=”#00ff00″; ctx.fill(); এর মাধ্যমে মাঝখানের সবুজ রং তৈরি করা হয়েছে।

………………………………………………………………………………..

জ্ঞন বিজ্ঞানের সংস্পর্শে আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবীর প্রত্যাশায় আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল।