HTML5 Canvas
- পূর্ববর্তী পৃষ্ঠা HTML Input ফর্ম অ্যাট্রিবিউট
- পরবর্তী পৃষ্ঠা HTML5 SVG
ক্যানভাস ইলেকট্রনমটি ওয়েবসাইটে চিত্র চিত্রিতকরণের জন্য ব্যবহৃত হয়:
ক্যানভাস কি আছে?
এইচটিএমএল৫ ক্যানভাস ইলেকট্রনমটি জেভাস্ক্রিপ্ট দ্বারা ওয়েবসাইটে চিত্র দ্বারা চিত্রিতকরণ করে:
ক্যানভাস একটি চতুর্ভুজক্ষেত্র যা আপনি প্রত্যেক পিক্সেল নিয়ন্ত্রণ করতে পারেন:
ক্যানভাসটি বহুবিধ চিত্রিতকরণ পথ, চতুর্ভুজ, বৃত্ত, অক্ষর এবং ছবি যোগ করার পদ্ধতি সহ সম্পন্ন:
ক্যানভাস ইলেকট্রনম তৈরি করুন
এইচটিএমএল৫ পাতায় ক্যানভাস ইলেকট্রনম যোগ করুন。
ইলেকট্রনমের ইড, প্রস্থ এবং উচ্চতা নির্ধারণ করুন:
<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>
জেভাস্ক্রিপ্ট ক্যানভাস ইলেকট্রনম খুঁজতে ইড ব্যবহার করেছে:
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 ইলেকট্রন
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> আপনার ব্রাউজারটি canvas ইলেকট্রনটি সমর্থন করে না。 </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 ইলেকট্রন
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> আপনার ব্রাউজারটি canvas ইলেকট্রনটি সমর্থন করে না。 </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 ইলেকট্রন
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> আপনার ব্রাউজারটি canvas ইলেকট্রনটি সমর্থন করে না。 </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 ইলেকট্রন
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> আপনার ব্রাউজারটি HTML5 ক্যানভাস ট্যাগটি সমর্থন করে না。 </canvas>
HTML ক্যানভাস টিউটোরিয়াল
ক্যানভাস সম্পর্কে আরও জানতে আমাদের HTML ক্যানভাস টিউটোরিয়াল.
সংশ্লিষ্ট পৃষ্ঠা
রেফারেন্স ম্যানুয়াল:HTML 5 <canvas> ট্যাগ
রেফারেন্স ম্যানুয়াল:HTML DOM Canvas অবজেক্ট
- পূর্ববর্তী পৃষ্ঠা HTML Input ফর্ম অ্যাট্রিবিউট
- পরবর্তী পৃষ্ঠা HTML5 SVG
