مختصات Canvas HTML
- صفحه قبل ترسیم Canvas
- صفحه بعدی خط‌های Canvas
پیشنهاد دوره:
مختصات کanvas
کanvas HTML یک شبکه دو بعدی است.
مختصات بالا چپ کanvas (0,0) است.
در فصل قبلی، از روش‌های زیر استفاده کردیم: fillRect(0,0,150,75).
معنای آن این است: از نقطه بالا چپ (0,0) یک مکعب 150x75 پیکسلی را نقاشی کنید.
مثال مختصات
برای مشاهده مختصات x و y یک مکعب زیر، ماوس را روی آن قرار دهید:
X
Y
نقاشی خط
- ) - برای نقاشی خط مستقیم بر روی کanvas، از روش‌های زیر استفاده کنید:x,ymoveTo(
- ) - تعریف نقطه شروع خطx,ylineTo(
) - تعریف نقطه پایان خط
مثال
در موقعیت (0,0) نقطه شروع را تعریف کنید و در موقعیت (200,100) نقطه پایان را تعریف کنید. سپس از روش stroke() برای نقاشی واقعی خط استفاده کنید:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
نقاشی دایره
برای نقاشی دایره بر روی کanvas، از روش‌های زیر استفاده کنید:
- beginPath() - شروع یک مسیر
- arc(x,y,r,startangle,endangle) - ایجاد منحنی/ارک
برای ایجاد دایره با استفاده از arc(): زاویه شروع را برابر با 0 تنظیم کنید و زاویه پایان را برابر با 2 * Math.PI تنظیم کنید. پارامترهای x و y، مختصات x و y مرکز دایره را تعریف می‌کنند. پارامتر r، قطر دایره را تعریف می‌کند.
مثال
استفاده از روش arc() برای تعریف یک دایره. سپس از روش stroke() برای نقاشی واقعی دایره استفاده کنید:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
لطفاً به: مراجعه کنید
- صفحه قبل ترسیم Canvas
- صفحه بعدی خط‌های Canvas
