বাংলাদেশের লাল সবুজ পতাকা তৈরি করুন এইচ টি এম এল ৫ দিয়ে

14
1246
বাংলাদেশের লাল সবুজ পতাকা তৈরি করুন এইচ টি এম এল ৫ দিয়ে

টিউটো হোস্ট

টিউটোহোস্ট (TutoHost.com)বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্রভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছে। যোগাযোগ- ০১৯১৫৬৩৪৩২৮ ও ০১৯৭৫৬৩৪৩২৮
বাংলাদেশের লাল সবুজ পতাকা তৈরি করুন এইচ টি এম এল ৫ দিয়ে

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

আমরা আমাদের দেশকে যেমন ভালবাসি ঠিক তেমনি ভালবাসি আমাদের লাল সবুজের পতাকাকে। আজ আমরা এইচ টি এম এল -৫ এর ক্যানভাস ইলিমেন্ট ব্যবহার করে বাংলাদেশের লাল সবুজ পতাকা তৈরি করব।

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

একবার দেখে নেয়া যাক আমাদের তৈরি লাল-সবুজ পতাকাটি।

বাংলাদেশের লাল সবুজ পতাকা তৈরি করুন এইচ টি এম এল ৫ দিয়ে

প্রজেক্ট অনুশীলন
<html>
<head>
<style>
#myCanvas {
border: 1px solid #9C9898;
}
body {
margin: 0px;
padding: 0px;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);

var radius = 100;

context.beginPath();
context.rect(35, 35, 500, 300);
context.fillStyle = ‘green’;
context.fill();
context.lineWidth = 1;
context.strokeStyle = ‘black’;
context.stroke();

context.beginPath();
context.arc(285, 185, radius, 0, 2 * Math.PI, false);
context.fillStyle = ‘red’;
context.fill();
context.lineWidth =1;
context.strokeStyle = ‘#003300’;
context.stroke();
};

</script>
</head>
<body>
<canvas id=”myCanvas” width=”570″ height=”370″></canvas>
</body>
</html>

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

 

 

বাংলাদেশের লাল সবুজ পতাকা তৈরি করুন এইচ টি এম এল ৫ দিয়ে

কোডিং Save করতে কোন সমস্যা হলে এখান থেকে Example Zip ফাইল ডাউনলোড করুন

প্রজেক্ট বিশ্লেষণ

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

window.onload = function() {
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);

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

var radius = 100; এর মাধ্যমে আমাদের লাল সবুজ পতাকার লাল বৃত্তের ব্যাসার্ধ্য নির্ধারণ করার জন্য ভেরিয়েবল ডিক্লেয়অর করা হয়েছে 100 ।

context.beginPath(); এর মাধ্যমে একটা পাত তৈরি করা হয়েছে।

context.rect(35, 35, 500, 300); এর মাধ্যমে একটা রেকট্যাঙ্গেল তৈরি করা হয়েছে যার x অক্ষের দিকে দূরত্ব 35 পিক্সেল , Y অক্ষের দিকে দূরত্ব 35 পিক্সেল, দৈর্ঘ্য 500 পিক্সেল, প্রস্থ্ 300 পিক্সেল। যেহেতু আমাদের পতাকার দৈর্ঘ্য এবং প্রস্থের অনুপাত ১০:৬।

context.fillStyle = ‘green’;
context.fill();

এর মাধ্যমে আমাদের লাল সবুজ পতাকার আয়তক্ষেত্রটিকে সবুজ রং করা হয়েছে।

context.lineWidth = 1;
context.strokeStyle = ‘black’;
context.stroke();

এর মাধ্যমে সবুজ আয়তক্ষেত্রটির চারদিকে 1 পিক্সেল এর কালো রঙের স্ট্রোক বা বর্ডার দেয়া হয়েছে।

context.beginPath();
context.arc(285, 185, radius, 0, 2 * Math.PI, false);

এর মাধ্যমে নতুন আর একটি পাত নিয়ে একটা বৃত্ত অংকন করা হয়েছে। যার x অক্ষের দিকে দূরত্ব 285 পিক্সেল , Y অক্ষের দিকে দূরত্ব 185 পিক্সেল, radias ভেরিয়েবলের মান প্রথমেই নির্ধারণ করা হয়েছে 100। তাই বৃত্তের ব্যাসার্ধ্য হবে 100 পিক্সেল। কারণ আমাদের লাল সবুজ পতাকার ব্যাসার্ধ্য হয় দৈর্ঘ্যের পাঁচ ভাগের এক ভাগ।

context.fillStyle = ‘red’;
context.fill();

এর মাধ্যমে আমাদের লাল সবুজ পতাকার বৃত্তাটিকে লাল রং করা হয়েছে।

context.lineWidth =1;
context.strokeStyle = ‘#003300’;
context.stroke();

এর মাধ্যমে লাল বৃত্তটির চারদিকে 1 পিক্সেল এর #003300 কালারের স্ট্রোক বা বর্ডার দেয়া হয়েছে।

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

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

পোস্টটির মূল লেখক: টিউটোহোস্ট টিম সদস্য অসিম কুমার
পোস্টটি ইতোপূর্বে: খানে প্রকাশিত

Advertisement -
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

14 মন্তব্য

  1. আমি অনেক চেষ্টা করেও কোডটা ভালভাবে প্রদর্শন করাতে পারলাম না। ওয়ার্ডপ্রেসে সমস্যা হয়। এডমিন প্যালেলের উদ্দেশ্যে বলছি syntax highlighter প্লাগ-ইনসটা ব্যবহার করলে কোডিং প্রদর্শন করলে সুবিধা হবে।

    আপনারা যারা প্রজেক্টটা করতে পারেন নাই তারা http://s.driver.tunerpage.com/wp-content/uploads/2012/09/flag.zip এখান থেকে প্রজেক্ট এর Zip ফাইলটা ডাউনলোড করে নিন।

    সবাইকে ধন্যবাদ । সকলের জন্য শুভকামনা রইল।
    =================================
    টিউটোহোস্ট এর পক্ষথেকে “অসীম”

    • আমিও দেখলাম পারলাম না ….আপনার টিউনটি ভাল হয়েছে ..অশেষ ধন্যবাদ….আমি যে কোড গুলো দিয়েছি কিছু মনে করবেন না ..আমি আসলে চেয়েছিলাম কেউ যাতে খারাপ কমেন্ট না করে ..যেমন অনেকে বলবে কাজ করছেন না এই ধরনের কমেন্ট …..কমেন্ট কারীরা বুঝতে চাইনা যে কষ্ট করে একজন টিজে পোস্টটি করেছে …কিছু মনে করবেন না অনেক কথা বলে ফেলেছি……

  2. window.onload = function() {
    var canvas = document.getElementById(‘myCanvas’);
    var context = canvas.getContext(‘2d’);

    var radius = 100;

    context.beginPath();
    context.rect(35, 35, 500, 300);
    context.fillStyle = ‘green’;
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = ‘black’;
    context.stroke();

    context.beginPath();
    context.arc(285, 185, radius, 0, 2 * Math.PI, false);
    context.fillStyle = ‘red’;
    context.fill();
    context.lineWidth =1;
    context.strokeStyle = ‘#003300’;
    context.stroke();
    };

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

sixteen − 3 =