شروع کار مقدماتی با HTML5 Canvas (جلسه 7) : رسم کمان و دایره

‏  4 دقیقه
۱۹ اسفند ۱۳۹۵
شروع کار مقدماتی با HTML5 Canvas (جلسه 7) : رسم کمان و دایره

html-canvas

در جلسه گذشته توضیحاتی در مورد رسم مسیر یا Path در Canvas براتون دادیم و شما رو با متدهای lineTo و moveTo آشنا کردیم. در این جلسه میخوایم در مورد رسم کمان و دایره براتون توضیح بدیم و شما رو بصورت کامل با اونا آشنا کنیم. در ابتدا سراغ متد arc میریم که میتونیم با استفاده از اون یک دایره یا قسمتی از دایره رو رسم کنیم. نحوه استفاده از این متد بصورت زیر هست:

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

توضیحات مربوط به کد بالا:

  • x : مختصات افقی مرکز دایره رو مشخص میکنه
  • y : مختصات عمودی مرکز دایره رو مشخص میکنه
  • radius : شعاع دایره رو مشخص میکنه
  • startAngle : زاویه ای که کمان از اونجا شروع به رسم شدن میکنه و بر حسب رادیان هست
  • endAngle : زاویه ای که کمان به اونجا ختم میشه و بر حسب رادیان هست
  • anticlockwise : این مورد اختیاری هست و میتونین از اون استفاده نکنید. در اینجا میتونین یک مقدار Boolean رو قرار بدین. در حالت پیش فرض کمان بصورت ساعتگرد رسم میشه ولی با قرار دادن مقدار true میتونین اون رو بصورت پادساعتگرد یا خلاف جهت عقربه‌های ساعت بچرخونید.

برای فهم بیشتر میتونین به تصویر زیر دقت کنید:html5 canvas 16

همونطور که میبینید یک دایره مثلثاتی رسم شده و زاویه بر حسب رادیان در سمت چپ 0 هست و اگر 180 درجه جلو بریم به pi یا همون عدد پی میرسیم. در بالا کمان قرمز از 1.5pi تا 2pi یا همون 0 رسم شده هست. 2pi روی 0 قرار میگیره و یکی هستند. برای مثال اگر بخوایم یک دایره کامل رو رسم کنیم، بصورت زیر عمل میکنیم:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(60, 60, 50, 0, 2 * Math.PI, false);
ctx.stroke();

همونطور که دیدید یک دایره با شعاع 50 با مرکز 60 و 60 رسم کردیم که از زاویه 0 تا 2pi ادامه داره. خروجی هم بصورت زیر میشه:html5 canvas 17

حالا اگر بخوایم مانند تصویر اول از نقطه 1.5pi تا 2pi رسم کنیم، بصورت زیر عمل میکنیم:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(60, 60, 50, 3/2 * Math.PI, 2 * Math.PI, false);
ctx.stroke();

خروجی در مرورگر بصورت زیر هست:html5 canvas 18

در بالا این دایره‌ها رو با استفاده از stroke رسم کردیم. شما میتونین این موارد رو با fill هم انجام بدین. همونطور که قبلا گفتیم زمانی که از fill استفاده میکنید، بصورت اتوماتیک مسیر رو میبنده و درون اون رو با استایل پیش فرض پر میکنه. میتونیم اشکال زیر رو با روش بالا بسازیم:html5 canvas 19

میبینید که موارد بالا توخالی و موارد پایین توپر هستند. شما میتونین اشکال پیشرفته‌تری رو با استفاده از متدهای قبلی درست کنید. مثلا میتونیم با ترکیب متدهای moveTo و arc یک شکلک زیبا رو درست کنیم. بصورت زیر:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
ctx.stroke();

خروجی در مرورگر:html5 canvas 20

متد بعدی که در مورد اون توضیح میدیم arcTo هست که با استفاده از اون میتونیم یک کمان رو درون مسیر خودمون به وجود بیاریم و به نقطه آخر مسیر متصل کنیم. Syntax استفاده از این متد بصورت زیر هست:

ctx.arcTo(x1, y1, x2, y2, radius);

ما به متد arcTo دو نقطه کنترل کننده رو معرفی میکنیم و این متد بر اساس این نقاط و آخرین نقطه مسیر قبلی یک کمان رو با شعاع مورد نظر ما رسم میکنه. پس x0 و y0 همون مختصات نقطه آخر مسیر هستن و x1 و y1 مختصات نقطه کنترل 1 و همچنین x2 و x2 مختصات نقطه کنترل 2 هستند. پس کد زیر رو در نظر بگیرید:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 100);             // P0
ctx.arcTo(100, 20, 180, 100, 75); // P1, P2 and the radius
ctx.lineTo(180, 100);             // P2
ctx.stroke();

همونطور که دیدید ابتدا به نقطه 50 و 100 رفتیم و این میشه نقطه P0 ما و بعد از اون مختصات نقاط کنترل دیگه رو هم مشخص کردیم و شعاع کمان رو هم 75 قرار دادیم. خروجی در مرورگر بصورت زیر هست:html5 canvas 22

به شکل زیر نگاه کنید تا بهتر متوجه بشید:html5 canvas 21

همونطور که دیدید از نقطه P0 به P1 و از P1 به P2 خطوطی رو رسم کردیم و کمان رو طوری بر اونا مماس کردیم که شعاع قوس 75 در بیاد. فهمیدن این مورد مقداری سخت و پیچیده هست اما با مطالعه این لینک میتونین خیلی خوب اون رو یاد بگیرید. یک مثال عملی هم داره که میتونین با اون کار کنید و نقاط رو Drag & Drop کنید.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ما در سون لرن با محدودسازی دسترسی آزاد به اینترنت مخالفیم     اطلاعات بیشتر