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

একবার দেখে নেয়া যাক আমাদের তৈরি ত্রিভুজটি কেমন হবে।

প্রয়োজনীয় কোড


      <!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myTringle");
        var context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(100, 140);
        context.lineTo(200, 10);
        context.lineTo(300, 140);
        context.lineWidth = 2;
        context.closePath();
        context.strokeStyle="#f00";
        context.stroke();
        context.fillStyle="#ff0";
        context.fill();

      };

    </script>
  </head>
  <body>
    <canvas id="myTringle" width="400" height="200" ></canvas>
  </body>
</html>

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

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

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

window.onload = function() {
var canvas = document.getElementById("myTringle");
var context = canvas.getContext("2d");

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

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

context.moveTo(100, 140); এর মাধ্যমে পাতটিকে রেফারেন্স পয়েন্ট এর মাধ্যমে সরানো হয়েছে।

অর্থাৎ যেকোন কিছু ড্রইং করলে উপরের দিকের বাম কর্ণারের থেকে 100, 140 দূরে থেকে শুরু হবে।

context.lineTo(200, 10); এর মাধ্যমে ক্যানভাসের সর্বশেষ উল্লেখিত বিন্দু থেকে 200, 10 বিন্দু পর্যন্ত একটা লাইন তৈরি করবে ।

context.lineWidth = 2; এর মাধ্যমে লাইন এর চওড়া নির্ধারণ করা হয়েছে।

context.closePath(); এর মাধ্যমে পাতটিকে একটা বদ্ধপাতে রূপান্তর করা হয়েছে। যা একটা ত্রিভুজ আকৃতি ধারণ করেছে।

context.strokeStyle=”#f00″; context.stroke(); এর মাধ্যমে লাইনের স্ট্রোক কালার নির্ধারণ করা হয়েছে

context.fillStyle=”#ff0″; context.fill() ; এর মাধ্যমে ফিল্ড কালার দেয়া হয়েছে। এজন্যই ত্রিভুজটিকে হলুদ দেখাচ্ছে।

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

আজ এখানেই শেষ করছি। সকলের জন্য শুভ কামনা রইল।

comments

18 কমেন্টস

  1. অসীম ভাই অনেক দিন হলো মাইক্রো কন্ট্রোলারের উপর কিছু ‍লিখছেন না। আমি আপনার পোস্টের অপেক্ষায় আছি। আমি মাইক্রোকন্ট্রোলার ‍নিয়ে একটা সমস্যায় পড়েছি। আমি pic 16F84A এর জন্য Micro c programme এ LED কম্বিনেশনের জন্য নিম্নের প্রোগ্রাম টি লিখে বার্ণ করেছি।

    void main() {
    TRISA=0x00;
    PORTA=0x00;
    TRISB=0x00;
    PORTB=0x00;

    do{
    PORTA=PORTB=0x00;
    delay_ms(500);
    PORTA=PORTB=0xff;
    delay_ms(500);
    PORTA=PORTB=0x00;
    delay_ms(500);
    PORTA=PORTB=0xff;
    delay_ms(500);
    PORTB=0x00;
    PORTA=0b00000;
    delay_ms(500);
    PORTA=0b00001;
    delay_ms(500);
    PORTA=0b00011;
    }
    while(1);
    }

    কিন্তু PORT A এর ৫ নং পিনে কোন কাজ করছেনা।Porteous দিয়ে সিমুলেশন করেও RA4 এ কোন রেসপন্স পাচ্ছি না।আমি প্রোগ্রামিং এ একেবারেই নতুন। দয়া করে হেল্প করলে খুব উপকৃত হতাম। আপনার জন্য শুভকামনা রইল।

  2. I simply want to say I am just all new to blogs and really liked you’re web blog. More than likely I’m likely to bookmark your blog post . You actually come with terrific stories. Kudos for sharing your webpage.

  3. We merely need to inform you you the fact that I am certain beginner to wordpress blogging and totally liked your report. Very possible I am prone to save your web post . You indeed have impressive article subject. Truly Appreciate it for share-out with us your url document.

  4. We really wish to show you in which I’m really novice to posting and utterly loved your write-up. Likely I am probably to store your site post . You definitely have impressive article topic. Be Grateful For it for telling with us your internet site article.

  5. We merely intend to inform you in which I’m just fresh to writing a blog and clearly enjoyed your report. More than likely I am most likely to store your web post . You certainly have fantastic article writing. Be Thankful For it for sharing with us your website article.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Time limit is exhausted. Please reload the CAPTCHA.