এইচটিএমএল৫ ক্যানভাস HTML5 Canvas



Your browser does not support the HTML5 canvas tag. Your browser does not support the HTML5 canvas tag.

কোন ওয়েব পেজে গ্রাফিক্স অংকন করার জন্য এইচটিএমএল ৫ এর <canvas> এলিমেন্ট ব্যবহার করা হয়।
উপরে কতগুল গ্রাফিক্স প্রদর্শিত হয়েছে, যেগুলো <canvas> এলিমেন্ট ব্যবহার করে তৈরি করা হয়েছে।


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

কোন ওয়েব পেজে এইচটিএমএল৫ এর <canvas> এলিমেন্ট ব্যবহার করে জাভাস্ক্রিপ্টের মাদ্ধমে গ্রাফিক্স অংকন করা জায়। । <canvas> এলিমেন্ট হল গ্রাফিক্সের জন্য সুধুমাত্র একটি ধারক বা container. কোন গ্রাফিক্স অংকন করতে হলে অবসসয় জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। বক্স, বৃত্ত, টেক্সট বা কন ছবি যুক্ত করার জন্য ক্যানভাসের বিভিন্ন মেথড রয়েছে।


ব্রাউজার সাপোর্ট

টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে <canvas> এলিমেন্ট সমর্থন বা support করে।

এলিমেন্ট
<canvas> 4.09.02.03.19.0


ক্যানভাসের উদাহরন

ক্যানভাস হল কোন এইচটিএমএল পেজে একটি আয়তকার ক্ষেত্র। সয়ঙ্ক্রিও ভাবে, একটি ক্যানভাসে কোন বর্ডার এবং কোন কন্টেন্ট থাকে না। নিচে ক্যানভাস এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

<canvas id="id_name" width="value" height="value"></canvas>


নোট - সব সময় একটি আইডি আত্ত্রিবুত নির্ধারণ করুন, যেই আইডি ধরে স্ক্রিপ্টে কল করা হবে। এর সাথে একটি width এবং height আত্ত্রিবুত ও নির্ধারণ করুন যা ক্যানভাস এর আকার নির্ধারণ করবে।

নিচে ক্যানভাস এর একটি উদাহরন দেখুন।

উদাহরণ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #999999;">
</canvas>




ক্যানভাসে কোন রেখা অংকন করা

নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে একটি রেখা অংকন করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

উদাহরণ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>




কানভাসে বৃত্ত অংকন করা

নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে একটি বৃত্ত অংকন করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

উদাহরণ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>




কানভাসে টেক্সট লেখা

নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে একটি টেক্সট অংকন করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

উদাহরণ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("WebsSchool",10,50);
</script>




ক্যানভাসে স্ট্রোক স্টাইলের টেক্সট

নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে একটি স্ট্রোক স্টাইলের টেক্সট অংকন করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

উদাহরণ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("WebsSchool",10,50);
</script>




ক্যানভাসে লিনিয়ার গ্রাডিয়েন্ট

নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে লিনিয়ার গ্রাডিয়েন্ট তৈরি করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

উদাহরণ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>




ক্যানভাসে Circular গ্রাডিয়েন্ট

নিচে ক্যানভাসের একটি উদাহরন দেখুন, যেখানে Circular গ্রাডিয়েন্ট তৈরি করা হয়েছে।

Your browser does not support the HTML5 canvas tag.

উদাহরণ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.