HTML5 Canvas
- পূর্ববর্তী পৃষ্ঠা HTML Input ফর্ম অ্যাট্রিবিউট
- পরবর্তী পৃষ্ঠা HTML5 SVG
ক্যানভাস ইলেকট্রনটি ওয়েবসাইটে গ্রাফিক্স চিত্রাঙ্কনের জন্য ব্যবহৃত হয়:
ক্যানভাস কি?
HTML5 এর ক্যানভাস ইলেকট্রনটি ওয়েবসাইটে চিত্র চিত্রাঙ্কনের জন্য জেভাস্ক্রিপ্ট ব্যবহার করে:
ক্যানভাস একটি আকৃতির এলাকা, যার প্রত্যেক পিক্সেলকে আপনি নিয়ন্ত্রণ করতে পারেন:
ক্যানভাস বহুভাবে চিত্রাঙ্কন পথ, আকৃতি, গণিত এবং ছবি যোগ করার পদ্ধতি সহ বিভিন্ন পদ্ধতি প্রদান করে:
ক্যানভাস ইলেকট্রন তৈরি করুন
HTML5 পাতায় ক্যানভাস ইলেকট্রন যোগ করুন。
ইলেকট্রনের id, প্রস্থ এবং উচ্চতা নির্ধারণ করুন:
<canvas id="myCanvas" width="200" height="100"></canvas>
জেভাস্ক্রিপ্ট দ্বারা চিত্রাঙ্কন
ক্যানভাস ইলেকট্রনটি নিজেই চিত্রাঙ্কন সক্ষম নয়। সবগুলি চিত্রাঙ্কন কাজকে জেভাস্ক্রিপ্ট ইন্টার্নালে করতে হবে:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
জেভাস্ক্রিপ্ট ক্যানভাস ইলেকট্রন খোঁজার জন্য id ব্যবহার করেছে:
var c=document.getElementById("myCanvas");
তারপর, context মথা তৈরি করুন:
var cxt=c.getContext("2d");
getContext("2d") মথা একটি অন্তর্নিহিত HTML5 মথা, যা বিভিন্ন পথ, আকৃতি, বৃত্ত, অক্ষর এবং ছবি যোগ করার মতো বিভিন্ন পদ্ধতি আছে
নিচের দুটি লাইন একটি লাল আকৃতি আঁকে
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle মথার মাধ্যমে এটিকে লাল রঙে রঙিন করা হয়, fillRect মথার মাধ্যমে আকার, অবস্থান এবং আকৃতি নির্দিষ্ট করা হয়
কোণ্ডায়ন বোঝানোর পদ্ধতি
উপরের fillRect মথার পারামিটার (0,0,150,75) আছে
অর্থাৎ: 150x75 আকারের একটি আকৃতি আঁকুন, যা ডানদিকের ওপরের কোণ থেকে (0,0) শুরু করে।
এইরকম, ক্যানভাসের X এবং Y কোণ্ডারগুলি ক্যানভাসের ওপর চিত্রিতকরণকে স্থানান্তরিত করে।
উদাহরণ: আপনি আকারটির ওপর মাউস লোকানোর পর কোণ্ডার দেখতে পাবেন
আরও ক্যানভাস উদাহরণ
নিচের ক্যানভাস এলিমেন্টের ওপর চিত্রিতকরণের আরও উদাহরণ:
উদাহরণ - লাইন
আকার এবং শেষ স্থান নির্দিষ্ট করে একটি লাইন আঁকুন:
JavaScript কোডঃ
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
ক্যানভাস ইলেকট্রন
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> আপনার ব্রাউজারটি ক্যানভাস ইলেকট্রনটি সমর্থন করে না。 </canvas>
উদাহরণ - বৃত্ত
আকার, রঙ এবং অবস্থান নির্দিষ্ট করে একটি বৃত্ত আঁকুন:
JavaScript কোডঃ
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
ক্যানভাস ইলেকট্রন
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> আপনার ব্রাউজারটি ক্যানভাস ইলেকট্রনটি সমর্থন করে না。 </canvas>
উদাহরণ - গ্রেডিয়েন্ট
আপনার নির্দিষ্ট রঙে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড আঁকুন:
JavaScript কোডঃ
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
ক্যানভাস ইলেকট্রন
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> আপনার ব্রাউজারটি ক্যানভাস ইলেকট্রনটি সমর্থন করে না。 </canvas>
ইনস্ট্যান্স - ছবি
একটি ছবি ক্যানভাসে স্থাপন করুন:
JavaScript কোডঃ
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
ক্যানভাস ইলেকট্রন
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> আপনার ব্রাউজারটি HTML5 ক্যানভাস ট্যাগটি সমর্থন করে না。 </canvas>
HTML ক্যানভাস টিউটোরিয়াল
ক্যানভাস নিয়ে আরও জানতে আমাদের HTML ক্যানভাস টিউটোরিয়াল。
সংশ্লিষ্ট পৃষ্ঠা
রেফারেন্স হান্ডবুক:HTML 5 <canvas> ট্যাগ
রেফারেন্স হান্ডবুক:HTML DOM ক্যানভাস অবজেক্ট
- পূর্ববর্তী পৃষ্ঠা HTML Input ফর্ম অ্যাট্রিবিউট
- পরবর্তী পৃষ্ঠা HTML5 SVG
