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

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

html-canvas

نکاتی در مورد Canvas

در اینجا قصد داریم تعدادی نکته تکمیلی رو در اختیارتون قرار بدیم که برای ادامه کار به اونا نیاز دارید.

نکته 1 : سیستم مختصات در Canvas

همونطور که قبلا هم گفتیم زمانی که از زمینه 2 بعدی canvas استفاده میکنیم، دو محور افقی یا x و محور عمودی یا y رو داریم. سیستم مختصات در Canvas بصورت زیر هست:html5 canvas 5

همونطور که میبینید، نقطه 0 و 0 مربوط به Canvas در بالا و سمت چپ قرار داره و از این نقطه به سمت راست، x زیاد میشه و از اون نقطه به پایین، y زیاد میشه. پس x در جهت راست و y در جهت پایین زیاد میشه. در سیستم مختصات Canvas مقادیر منفی وجود ندارد. پس دونستن این سیستم مختصات میتونه خیلی به شما کمک کنه و حتما به اون نیاز پیدا خواهید کرد.

نکته 2 : Canvas در حالت Immediate Mode قرار دارد

حالت Immediate Mode رو میشه بصورت تصویر زیر نمایش داد:html5 canvas 6

همونطور که میبینید در حالت Immediate Mode، بعد از اینکه شکل مورد نظر رو رسم میکنیم، دیگه بصورت مستقیم دسترسی به اون نداریم و نمیتونیم اون رو تغییر بدیم. میتونیم برای این نمونه، نرم افزار Paint درون ویندوز رو مثال بزنیم. همونطور که میدونید زمانی که مثلا یک خط رو رسم میکنیم، بعد از اینکه رسم به پایان رسید، دیگه نمیتونیم ضخامت یا رنگ اون رو تغییر بدیم. تنها کاری که میتونیم بکنیم اینه که اون رو با استفاده از پاک کن، حذف کنیم و دوباره با عوض کردن تنظیمات، خط جدید رو رسم کنیم. Canvas هم در این دسته قرار میگیره و زمانی که یک خط یا شکل رو رسم میکنید، بعد از رسم دیگه دسترسی به اون ندارید و اون شکل به تعدادی پیکسل تبدیل شده است.

در مقابل این حالت، Retained Mode قرار دارد:html5 canvas 7

در اینجا همونطور که میبینید، شما چیزی که میخواید رسم بشه رو به API میگید و API به اون شکل شما درون حافظه یا Memory دسترسی داره و میتونه خصوصیات اون رو حتی بعد از رسم شدن، تغییر بده. برای این حالت میشه نرم فزار Photoshop رو مثال زد. درون Photoshop شما میتونین یک خط رو رسم کنید و بعد از اتمام رسم خط، اون رو انتخاب کنید و ضخامت و رنگ اون رو تغییر بدین. همچنین میتونین به History دسترسی داشته باشید و به مراحل قبلی و بعدی هم برید. برای مطالعه بیشتر در مورد این دو حالت میتونین به این لینک و این لینک مراجعه کنید.

نکته 3 : واحد اندازه گیری در Canvas

درون عنصر Canvas برای قرار دادن طول و ارتفاع و بقیه موارد، فقط میتونین از واحد پیکسل استفاده کنید و از واحدهای دیگه مثل em و pt و in و cm و ... نمیتونین استفاده کنید.

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

درون المنت Canvas دو شکل اصلی وجود داره که با استفاده از اون میتونین به رسم اشکال بپردازید.

  • Rectangle : با استفاده از این مورد میتونین مستطیلهای توپر و تو خالی رو بر روی زمینه Canvas رسم کنید.
  • Path : با استفاده از این مورد و متدها و ویژگی‌های زیاد اون میتونین تقریبا هر شکلی رو بر روی Canvas رسم کنید و خیلی پیچیده‌تر از Rectangle هست.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

hamed_z2001

نظر خوبیه, توی ریسایز عرض و ارتفاع خود canvas رو تنظیم کنیم, خب, path هایی که کشیده شدند و با استفاده از نقطه بهشون مختصات میدیم, چه بلایی سرشون میاد؟؟اونا رو توی ریسپانسیو چیکار میشه کرد؟البته شاید مربوط به جلسات بعد باشه 🙄

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

بله در جلسات بعدی در مورد این قضیه هم صحبت خواهیم کرد…عجول نباشید
شاید فعلا دیدن لینک زیر بتونه کمکتون کنه:
https://www.sitepoint.com/modernize-your-html5-canvas-game/
موفق باشید

hamed_z2001

بسیار ممنون از آموزش این جلستون …
یک سوال,گفتید واحد اندازه گیریش فقط پیکسله,پس اینجوری باشه عملا canvas رو نمیشه ریسپانسیو کرد,همینطوره؟؟ میشه یه توضیح بدید؟؟

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

بله همینطوره…شما باید با استفاده از Javascript هر زمان که مرورگر تغییر سایز میده، عرض و ارتفاع جدید مرورگر رو بگیرید و برای Canvas اعمال کنید و اشکال مورد نظرتون رو دوباره بر روی زمینه Canvas رندر کنید و بکشید…
مثلا میتونین از رویداد resize مربوط به Window استفاده کنید…
موفق باشید