কম্পিউটার
 Computer >> কম্পিউটার >  >> প্রোগ্রামিং >> HTML

এইচটিএমএল ক্যানভাস বেসিক

একটি ওয়েব পৃষ্ঠাতে ক্যানভাস আঁকতে, HTML5 ক্যানভাস উপাদান ব্যবহার করুন। উপাদান আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করে গ্রাফিক্স আঁকতে দেয়। ক্যানভাসের সাহায্যে একটি রেখা, আয়তক্ষেত্র, বেজিয়ার কার্ভ ইত্যাদি আঁকুন।

প্রতিটি ক্যানভাসে দুটি উপাদান থাকে যা ক্যানভাসের উচ্চতা এবং প্রস্থ যথাক্রমে উচ্চতা এবং প্রস্থকে বর্ণনা করে।

এর সাথে, আপনাকে নীচের কোড স্নিপেটে দেখানো হিসাবে ক্যানভাসের জন্য একটি আইডি সেট করতে হবে -

<canvas id = "newCanvas" width = "100" height = "100"></canvas>

getElementById() পদ্ধতি -

ব্যবহার করে DOM-এ সেই উপাদানটি খুঁজুন 
var canvas = document.getElementById("newCanvas");

ক্যানভাসে কিছু প্রদর্শন করতে, একটি স্ক্রিপ্টকে প্রথমে রেন্ডারিং প্রসঙ্গ অ্যাক্সেস করতে হবে এবং এটিতে আঁকতে হবে। রেন্ডারিং প্রসঙ্গ এবং এর অঙ্কন ফাংশনগুলি পেতে -এ getContext নামে একটি DOM পদ্ধতি রয়েছে। এই ফাংশনটি একটি প্যারামিটার নেয়, context2d এর ধরন।

আসুন এখন −

দিয়ে HTML5 এ পাথ আঁকার একটি উদাহরণ দেখি

উদাহরণ

<!DOCTYPE HTML>
<html>
<head>
<style>
   #test {
      width: 100px;
      height:100px;
      margin: 0px auto;
      background-color: orange;
   }
</style>
<script>
   function drawShape() {
      // get the canvas element using the DOM
      var canvas = document.getElementById('mycanvas');
      // Make sure we don't execute when canvas isn't supported
      if (canvas.getContext) {
         // use getContext to use the canvas for drawing
         var ctx = canvas.getContext('2d');
         // Draw shapes
         ctx.beginPath();
         ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
         ctx.moveTo(110,75);
         ctx.arc(75,75,35,0,Math.PI,false); // Mouth
         ctx.moveTo(65,65);
         ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
         ctx.moveTo(95,65);
         ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
         ctx.stroke();
      } else {
         alert('You need Safari or Firefox 1.5+ to see this demo.');
      }
   }
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

এইচটিএমএল ক্যানভাস বেসিক

HTML5 -

-এ দ্বিঘাত বক্ররেখা আঁকার আরেকটি উদাহরণ দেখা যাক

উদাহরণ

<!DOCTYPE HTML>
<html>
<head>
<style>
   #test {
      width: 100px;
      height:100px;
      margin: 0px auto;
   }
</style>
<script type>
   function drawShape() {
      // get the canvas element using the DOM
      var canvas = document.getElementById('mycanvas');  
      // Make sure we don't execute when canvas isn't supported
      if (canvas.getContext) {
         // use getContext to use the canvas for drawing
         var ctx = canvas.getContext('2d');
         // Draw shapes
         ctx.beginPath();
         ctx.moveTo(75,25);
         ctx.quadraticCurveTo(25,25,25,62.5);
         ctx.quadraticCurveTo(25,100,50,100);
         ctx.quadraticCurveTo(50,120,30,125);
         ctx.quadraticCurveTo(60,120,65,100);
         ctx.quadraticCurveTo(125,100,125,62.5);
         ctx.quadraticCurveTo(125,25,75,25);
         ctx.stroke();
      } else {
         alert('You need Safari or Firefox 1.5+ to see this demo.');
      }
   }
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

এইচটিএমএল ক্যানভাস বেসিক


  1. এইচটিএমএল ক্যানভাস শ্যাডোব্লার প্রপার্টি

  2. HTML ক্যানভাস শ্যাডোঅফসেটওয়াই প্রপার্টি

  3. HTML ক্যানভাস স্ট্রোক() পদ্ধতি

  4. HTML DOM ক্যানভাস অবজেক্ট