ایچ تی ایم ال کینس مربع
- پچھلے پیج کانواس شپ
- پائیدھی پیج کانواس دائرہ
مثال
یک مربع 150*100 پیکسلی بکشید:
const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.rect(20, 20, 150, 100); ctx.stroke();
روش rect()
روش rect() یک مربع به مسیر اضافه میکند.
نحوه استفاده:
context.rect(x, y, width, height)
پارامترها | توضیحات |
---|---|
x | مختصات x بالای سمت چپ مربع. |
y | مختصات y بالای سمت چپ مربع. |
width | عرض مربع به پیکسل. |
height | ارتفاع مربع به پیکسل. |
مثالهای بیشتر
مثال
با استفاده از روش rect() سه مربع ایجاد کنید:
جاوااسکریپت:
const canvas = document.getElementById("myCanvas"); const ctx = canvas.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();
مزید دیکھئے:
- پچھلے پیج کانواس شپ
- پائیدھی پیج کانواس دائرہ