HTML canvas rect() পদ্ধতি
বিন্যাস ও ব্যবহার
rect() মথুরা পদ্ধতি দিয়ে চতুর্ভুজ তৈরি করা হয়。
সুঝানা:ব্যবহার করুন stroke() বা fill() ক্যানভাসের ওপর চতুর্ভুজ লিখার পদ্ধতি
প্রদর্শন
উদাহরণ 1
150*100 পিক্সেলের চতুর্ভুজ দ্রব্যান্তরণ করা হয়:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
বিন্যাস
context.rect(x,y,width,height);
পারামিটার মান
| পারামিটার | বর্ণনা |
|---|---|
| x | চতুর্ভুজের ডানদিকের উপরস্থ x অক্ষ |
| y | চতুর্ভুজের ডানদিকের উপরস্থ y অক্ষ |
| width | চতুর্ভুজের প্রশস্ততা, পিক্সেল অনুযায়ী。 |
| height | চতুর্ভুজের উচ্চতা, পিক্সেল অনুযায়ী。 |
আরও উদাহরণ
উদাহরণ 2
rect() মথুরা দিয়ে তিনটি চতুর্ভুজ তৈরি করা হয়:
JavaScript:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// লাল চতুর্ভুজ
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();
// সবুজ রং বর্গ
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
// নীল রং বর্গ
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
ব্রাউজার সমর্থন
টেবিলের সংখ্যা এটি এই বৈশিষ্ট্যটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজার সংস্করণটি নির্দেশ করে。
| চ্রোম | এজ | ফায়ারফক্স | সাফারি | অপেরা |
|---|---|---|---|---|
| চ্রোম | এজ | ফায়ারফক্স | সাফারি | অপেরা |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
মন্তব্য:Internet Explorer 8 এবং তার পূর্ববর্তী সংস্করণগুলি <canvas> ইলেকট্রনেট সমর্থন করে না。
