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

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

html-canvas

همونطور که دیدید در جلسه گذشته در مورد رسم مستطیل صحبت کردیم. در اونجا کار کردن با fillRect و strokeRect و clearRect رو یاد گرفتیم. در این جلسه و جلسات بعد قصد داریم شکل اصلی دیگه ای که در Canvas میتونیم از اون استفاده کنیم رو بهتون آموزش بدیم. یک Path یا مسیر شامل تعدادی نقطه یا Point هست که به وسیله خطوط به یکدیگر متصل شده اند. این خطوط میتونین صاف یا منحنی باشن یا میتونن ضخامت یا رنگ متفاوتی داشته باشن. بصورت کلی برای رسم یک مسیر باید مراحل زیر رو انجام بدیم:

  1. در ابتدا باید مسیر رو با استفاده از beginPath بسازیم.
  2. بعد از اون از متدهای مختلفی که برای رسم انواع مختلف خط و شکل وجود داره استفاده میکنیم
  3. بعد از اون و در پایان مسیر رو با استفاده از closePath میبندیم.
  4. در نهایت هم با استفاده از متد fill یا stroke مسیر مورد نظر رو رسم میکنیم.

در ادامه مورد 4 باید بگیم که fill مسیر رو بصورت توپر و stroke مسیر رو بصورت توخالی رسم میکنه. همچنین تا قبل از اینکه از متدهای fill یا stroke استفاده کنیم، شکل بر روی Canvas رسم نمیشه و فقط اطلاعات رو مشخص کردیم. پس در ابتدا باید مسیر رو شروع کرده و بسازیم:

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

ctx.beginPath();

با اینکار مسیر مورد نظر شروع میشه و میتونین از متدهایی که داره استفاده کنید تا شکل‌های پیچیده رو به وجود بیارید. تقریبا در همه موارد، متدی که بعد از beginPath از اون استفاده میشه، متد moveTo هست که با استفاده از اون میتونیم موقعیت شروع مسیر رو مشخص کنیم. در واقع با استفاده از moveTo میتونیم موقعیت نقطه آخر یا Last point رو درون Canvas مشخص کنیم و با ترسیم هر مسیر جدید، Last point به آخر اون مسیر انتقال داده میشه. میتونین به canvas مثل یک کاغذ نگاه کنید و Last point هم مانند نوک مدادی هست که در دست ما قرار داره. هر زمانی که بخوایم چیزی رو رسم کنیم، در ابتدا نوک مداد رو بر روی نقطه مورد نظر قرار میدیم و شروع به کشیدن میکنیم. بعد از اینکه شکلتون رو کشیدید میتونین مداد رو بردارید و به موقعیت دیگه ای ببرید. اینکار در Canvas با استفاده از متد moveTo انجام میشه. همچنین برای اشکال ناپیوسته نیز زیاد از متد moveTo استفاده میشه. پس فرض کنید که بخوایم یک خط بکشیم که از نقطه 25 و 25 شروع بشه. برای مشخص کردن نقطه آغازین بصورت زیر عمل میکنیم:

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

ctx.beginPath();
ctx.moveTo(25, 25);

قدم بعدی اینه که با استفاده از متد lineTo یک خط مستقیم رو رسم کنیم. این متد یک خط مستقیم رو از Last Point تا مختصاتی که بهش میدیم رو برامون رسم میکنه. اگه بخوایم خط از 25 و 25 به 100 و 100 رسم بشه، بصورت زیر عمل میکنیم:

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

ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(100, 100);

دقت داشته باشید که در بالا حتما باید قبل از رسم خط توسط lineTo، موقعیت Last point مشخص شده باشه. اگر اینکارو نکنیم، canvas نمیدونه که نقطه شروع کجا هست و چیزی رسم نخواهد شد. مرحله بعد اینه که مسیر رو با استفاده از متد closePath ببندیم. بصورت زیر:

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

ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(100, 100);
ctx.closePath();

البته چون در اینجا فقط یک خط داریم و مسیری هنوز تشکیل نشده، بستن مسیر تاثیری نداره و امکان بستن مسیر میسر نیست. نکته دیگه ای هم که وجود داره اینه که اگر در کل مسیر فقط یک خط مستقیم وجود داشته باشه، نمیتونیم از متد fill استفاده کنیم و فقط باید از stroke برای رسم شکل استفاده کنیم. چون fill رو فقط میشه برای مواردی بکار برد که قابلیت بسته شدن رو داشته باشن. پس بصورت زیر خواهد شد:

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

ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();

خروجی:html5 canvas 14

نکته دیگه ای که باید به اون اشاره کنم اینه که زمانی که یک مسیر رو تعریف کردید و در نهایت خواستید از متد fill استفاده کنید، دیگه لازم نیس که از متد closePath استفاده کنید و خود متد fill مسیر رو وادار به بسته شدن میکنه و اون رو با استایلی که شما براش مشخص میکنید، پر میکنه و بر روی Canvas رسم میکنه. اما برای متد stroke حتما باید مسیر رو ببینید. مثال زیر رو ببینید:

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

ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();

همونطور که دیدید یک مسیر رو تعریف کردیم که از نقطه 75 و 50 شروع میشه و یک خط به سمت 100 و 75 کشیده میشه و از اونجا یک خط دیگه به سمت 100 و 25 کشیده میشه و در نهایت هم با استفاده از متد fill مسیر بسته میشه (یعنی یک خط از نقطه آخر مسیر به نقطه اول مسیر کشیده میشه) و بصورت توپر بر روی Canvas رسم میشه. خروجی بصورت زیر هست:html5 canvas 15

دیدید که به همین راحتی یک مثلث رو رسم کردیم. چون استایل رو مشخص نکردیم، پس استایل پیش فرض که همون رنگ مشکی هست اعمال میشه. در جلسات بعد بقیه متدهای مربوط به مسیر که با استفاده از اونا میتونیم شکلهای پیچیده‌تر رو به وجود بیاریم براتون توضیح میدیم.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

hamed_z2001

خیلی عالی بود مهندس,ممنون از آموزش خوبتون …

محمد اسفندیاری

خواهش میکنم
موفق باشید دوست عزیز