روش 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 |
نوٹ:اینٹرنیشنل ایکسپلورر 8 اور اس سے پچھلے کی نسلیں کا <canvas> علامت نہیں پشتیبند نہیں ہیں۔
