ترسیم اشکال دو بعدی اولیه روی بوم.

سلام 👋، خوش آمدید. در درس قبلی، در مورد اینکه اشکال دوبعدی چیست، بوم چیست، و نحوه استفاده از مختصات روی بوم بحث کردیم.

در این آموزش، شکل های اولیه را ترسیم می کنیم. ما روی بهبود درک خود از طراحی اشکال روی بوم کار خواهیم کرد.

قبل از شروع طراحی، چند نکته وجود دارد که باید در مورد استفاده از بوم بدانید.

انجام دهید

• به یاد داشته باشید که همیشه بوم خود را با آن ببندید </canvas> برچسب زدن
• آنچه را که می خواهید بکشید بر روی یک تکه کاغذ ترسیم کنید تا بدانید مختصات خود را کجا قرار دهید.

نمی کند

• اندازه شکلی که می کشید نباید بزرگتر از اندازه بوم شما باشد. اگر شیء شما بزرگتر از بوم شما باشد، ناحیه ای که بوم نمی تواند حاوی آن باشد نشان داده نمی شود. نمودار زیر نشان می دهد که وقتی بوم کوچکتر از نقاشی باشد چه اتفاقی می افتد.

اشکال ابتدایی

<canvas> تنها دو شکل اولیه را پشتیبانی می کند:

• مستطیل و
• مسیرها (لیست نقاط متصل شده توسط خطوط). تمام اشکال دیگر با ترکیب یک یا چند مسیر ایجاد می شوند.

رسم مستطیل.

از آنجایی که مستطیل یک شکل ابتدایی روی بوم است، مجموعه ای از روش های طراحی خاص خود را دارد. سه عملکرد روی بوم وجود دارد که مستطیل ها را ترسیم می کند:

• fillRect (x، y، عرض، ارتفاع). این روش یک مستطیل پر ایجاد می کند.

• strokeRect (x، y، عرض، ارتفاع). این طرح کلی مستطیل را ایجاد می کند.

• clearRect (x، y، عرض، ارتفاع). ناحیه مستطیلی انتخابی را پاک می کند و آن را شفاف می کند.

این سه تابع همگی از پارامترهای یکسانی استفاده می کنند. x و y گوشه بالا سمت چپ موقعیت مستطیل را روی بوم (نسبت به مبدا) مشخص می کنند. عرض و ارتفاع اندازه مستطیل را مشخص می کند.

در فایل اسکریپت ما.

کشیدن اشکال دیگر

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

بیایید یک خط بکشیم تا ببینیم مسیر چیست.

کد

یک نقطه، همانطور که در نمودارهای بالا نشان داده شده است، از یک مختصات x و y تشکیل شده است. یک مسیر از اتصال این نقاط با یک خط تشکیل می شود.

مثالی دیگر

کد

از کدهای بالا، متوجه روش های جدیدی شدیم:

• BeginPath()
• lineTo()
  و
• سکته()

BeginPath() مسیر جدیدی ایجاد می کند.

lineTo() یک نقطه جدید به بوم اضافه می کند.

سکته() شکل را با ترسیم طرح کلی آن ترسیم می کند.

شکل 1: مثلث

کد

نتیجه

شکل 2: یک فلش

کد

نتیجه

شکل 3: یک ستاره

کد

نتیجه

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