کشیدن اشکال با بوم

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

شبکه

قبل از شروع طراحی، باید در مورد شبکه بوم یا فضای مختصات صحبت کنیم. اسکلت HTML ما از صفحه قبل دارای یک عنصر بوم با عرض 150 پیکسل و ارتفاع 150 پیکسل بود.

معمولاً 1 واحد در شبکه با 1 پیکسل روی بوم مطابقت دارد. مبدا این شبکه در گوشه سمت چپ بالا در مختصات (0, 0) قرار دارد. همه عناصر نسبت به این مبدا قرار می گیرند. بنابراین موقعیت گوشه سمت چپ بالای مربع آبی به x پیکسل از سمت چپ و y پیکسل از بالا در مختصات (x, y) تبدیل می شود. بعداً در این آموزش خواهیم دید که چگونه می‌توانیم مبدا را به یک موقعیت متفاوت ترجمه کنیم، شبکه را بچرخانیم و حتی آن را مقیاس‌بندی کنیم، اما در حال حاضر به پیش‌فرض پایبند خواهیم بود.

رسم مستطیل

ابتدا اجازه دهید به مستطیل نگاه کنیم. سه تابع وجود دارد که مستطیل ها را روی بوم ترسیم می کند:

یک مستطیل پر می کشد.

یک طرح مستطیل شکل می کشد.

ناحیه مستطیلی مشخص شده را پاک می کند و آن را کاملاً شفاف می کند.

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

در زیر تابع draw() از صفحه قبل است، اما اکنون از این سه تابع استفاده می کند.

نمونه مستطیل شکل

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

اسکرین شات	نمونه زنده

تابع fillRect() یک مربع سیاه بزرگ به اندازه 100 پیکسل در هر طرف ترسیم می کند. تابع clearRect() سپس یک مربع 60x60 پیکسل را از مرکز پاک می کند و سپس strokeRect() فراخوانی می شود تا یک طرح مستطیلی به ابعاد 50x50 پیکسل در مربع پاک شده ایجاد کند.

در صفحات آینده دو روش جایگزین برای clearRect() خواهیم دید و همچنین نحوه تغییر رنگ و استایل شکل‌های رندر شده را خواهیم دید.

برخلاف توابع مسیر که در بخش بعدی خواهیم دید، هر سه تابع مستطیل بلافاصله به بوم کشیده می شوند.

ترسیم مسیرها

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

1. ابتدا مسیر را ایجاد می کنید.
2. سپس از دستورات نقاشی برای ترسیم در مسیر استفاده می کنید.
3. پس از ایجاد مسیر ، می توانید راه را برای ارائه آن سکته کنید یا پر کنید.

در اینجا توابع مورد استفاده برای انجام این مراحل آورده شده است:

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

روش های تنظیم مسیرهای مختلف برای اشیاء.

یک خط مستقیم به مسیر اضافه می کند و به شروع زیر مسیر فعلی می رود.

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

با پر کردن منطقه محتوای مسیر ، یک شکل محکم را ترسیم می کند.

اولین قدم برای ایجاد یک مسیر ، فراخوانی با شروع () است. در داخل ، مسیرها به عنوان لیستی از زیر (خطوط ، قوس ها و غیره) ذخیره می شوند که در کنار هم یک شکل تشکیل می دهند. هر بار که این روش خوانده می شود ، لیست تنظیم مجدد می شود و می توانیم شکل های جدیدی را شروع کنیم.

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

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

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

توجه: هنگامی که با Fill () تماس می گیرید ، هر شکل باز به طور خودکار بسته می شود ، بنابراین لازم نیست با ClosePath () تماس بگیرید. این موردی نیست که شما با سکته مغزی تماس بگیرید ().

ترسیم مثلث

به عنوان مثال ، کد ترسیم مثلث چیزی شبیه به این است:

نتیجه به نظر می رسد:

اسکرین شات	نمونه زنده

حرکت قلم

یک عملکرد بسیار مفید ، که در واقع چیزی را ترسیم نمی کند بلکه بخشی از لیست مسیر است که در بالا توضیح داده شد ، عملکرد Moveto () است. احتمالاً می توانید به بهترین وجه فکر کنید که یک قلم یا مداد را از یک نقطه روی یک تکه کاغذ بلند کرده و آن را در قسمت بعدی قرار دهید.

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

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

برای اینکه این کار را برای خودتان امتحان کنید ، می توانید از قطعه کد زیر استفاده کنید. فقط آن را در عملکرد قرعه کشی () که قبلاً دیدیم ، بچسبانید.

نتیجه به نظر می رسد:

اسکرین شات	نمونه زنده

اگر می خواهید خطوط اتصال را ببینید ، می توانید خطوطی را که Moveto () تماس می گیرند حذف کنید.

توجه: برای کسب اطلاعات بیشتر در مورد عملکرد ARC () ، به بخش ARCS در زیر مراجعه کنید.

خط

برای ترسیم خطوط مستقیم ، از روش Lineto () استفاده کنید.

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

این روش دو آرگومان ، X و Y را می گیرد که مختصات نقطه پایان خط هستند. نقطه شروع به مسیرهای قبلاً کشیده شده بستگی دارد ، جایی که نقطه پایان مسیر قبلی نقطه شروع موارد زیر است و غیره. نقطه شروع نیز با استفاده از روش Moveto () قابل تغییر است.

مثال زیر دو مثلث را ترسیم می کند ، یکی پر و دیگری مشخص شده.

این کار با فراخوانی StartPath () برای شروع یک مسیر شکل جدید آغاز می شود. سپس از روش Moveto () برای انتقال نقطه شروع به موقعیت مورد نظر استفاده می کنیم. در زیر این ، دو خط ترسیم شده است که دو طرف مثلث را تشکیل می دهند.

اسکرین شات	نمونه زنده

متوجه تفاوت مثلث پر شده و نوازش شده خواهید شد. این همانطور که در بالا ذکر شد ، زیرا شکل ها هنگام پر شدن یک مسیر به طور خودکار بسته می شوند ، اما نه وقتی که سکته می شوند. اگر ما را برای مثلث سکته مغزی () دور کنیم ، فقط دو خط ترسیم می شد ، نه یک مثلث کامل.

برای ترسیم قوس یا دایره ، از روشهای ARC () یا ARCTO () استفاده می کنیم.

یک قوس را که در موقعیت (x ، y) قرار دارد با شعاع r شروع می شود و از startangle شروع می شود و به پایان می رسد که در جهت داده شده توسط خلاف جهت عقربه های ساعت (پیش فرض به جهت عقربه های ساعت) نشان داده می شود.

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

بیایید نگاهی دقیق تر به روش ARC داشته باشیم ، که شش پارامتر طول می کشد: X و Y مختصات مرکز دایره ای هستند که قوس روی آن باید ترسیم شود. شعاع خود توضیحی است. پارامترهای Startangle و Entangle نقاط شروع و انتهایی قوس را در رادیان ، در امتداد منحنی دایره تعریف می کنند. اینها از محور x اندازه گیری می شوند. پارامتر خلاف جهت عقربه های ساعت یک مقدار بولی است که در صورت صحت ، قوس را در جهت عقربه های ساعت ترسیم می کند. در غیر این صورت ، قوس در جهت عقربه های ساعت کشیده می شود.

توجه: زاویه های عملکرد قوس در رادیان اندازه گیری می شوند ، نه درجه. برای تبدیل درجه به رادیان می توانید از بیان JavaScript زیر استفاده کنید: Radians = (Math. pi/180)*درجه.

مثال زیر کمی پیچیده تر از مواردی است که در بالا دیده ایم. این 12 قوس مختلف را با زوایای مختلف و پر می کند.

این دو برای حلقه ها برای حلقه کردن از ردیف ها و ستون های قوس هستند. برای هر قوس ، ما با فراخوانی StartPath () یک مسیر جدید را شروع می کنیم. در کد ، هر یک از پارامترهای قوس برای وضوح در یک متغیر است ، اما شما لزوماً این کار را در زندگی واقعی انجام نمی دهید.

مختصات X و Y باید به اندازه کافی واضح باشد. شعاع و Startangle ثابت هستند. در ستون اول از 180 درجه (نیمی از دایره) شروع می شود و با مراحل 90 درجه افزایش می یابد و در یک ستون آخر به یک دایره کامل می رسد.

بیانیه برای پارامتر جهت عقربه های ساعت باعث می شود که ردیف اول و سوم به عنوان قوس های جهت عقربه های ساعت و ردیف دوم و چهارم به عنوان قوس های خلاف جهت عقربه های ساعت ترسیم شود. سرانجام ، بیانیه IF باعث می شود قوس های نیمه سکته مغزی و قوس های نیمه پایین پر شده باشد.

توجه: این مثال به بوم کمی بزرگتر از سایر موارد موجود در این صفحه نیاز دارد: 150 200 200 پیکسل.

اسکرین شات	نمونه زنده

منحنی های بزیر و درجه دوم

نوع بعدی مسیرهای موجود منحنی های Bézier است که در هر دو نوع مکعب و درجه دوم موجود است. اینها به طور کلی برای ترسیم اشکال ارگانیک پیچیده استفاده می شوند.

با استفاده از نقطه کنترل مشخص شده توسط CP1X و CP1Y ، یک منحنی Bézier درجه دوم را از موقعیت قلم فعلی به نقطه انتهایی مشخص شده توسط X و Y می کشاند.

یک منحنی Bézier مکعب را از موقعیت قلم فعلی به نقطه انتهایی مشخص شده توسط X و Y ، با استفاده از نقاط کنترل مشخص شده توسط (CP1X ، CP1Y) و (CP2X ، CP2Y) ترسیم می کند.

تفاوت بین اینها در این است که یک منحنی Bézier درجه دوم دارای یک شروع و یک نقطه پایان (نقاط آبی) و فقط یک نقطه کنترل (نشان داده شده توسط نقطه قرمز) در حالی که یک منحنی Bézier مکعب از دو نقطه کنترل استفاده می کند.

پارامترهای X و Y در هر دو روش مختصات نقطه پایان هستند. CP1X و CP1Y مختصات نقطه کنترل اول هستند و CP2X و CP2Y مختصات نقطه کنترل دوم هستند.

استفاده از منحنی های Bézier درجه دوم و مکعب می تواند کاملاً چالش برانگیز باشد ، زیرا بر خلاف نرم افزار ترسیم وکتور مانند Adobe Illustrator ، ما بازخورد بصری مستقیمی در مورد آنچه انجام می دهیم نداریم. این باعث می شود شکل های پیچیده ای ترسیم شود. در مثال زیر ، ما برخی از اشکال ارگانیک ساده را ترسیم خواهیم کرد ، اما اگر وقت دارید و مهمتر از همه صبر ، اشکال بسیار پیچیده تری ایجاد می شود.

در این مثالها هیچ چیز سختی وجود ندارد. در هر دو مورد ، شاهد جانشینی منحنی ها هستیم که در نهایت به یک شکل کامل منجر می شود.

منحنی های بکر درجه دوم

این مثال از چندین منحنی Bézier درجه دوم برای ارائه یک بالون گفتار استفاده می کند.

اسکرین شات	نمونه زنده

منحنی های بزیر مکعب

این مثال با استفاده از منحنی های مکعب Bézier ، قلب را به خود جلب می کند.

اسکرین شات	نمونه زنده

مستطیل

علاوه بر سه روشی که در ترسیم مستطیل ها دیدیم ، که شکل های مستطیل شکل را مستقیماً به بوم می کشند ، روش Rect () نیز وجود دارد که یک مسیر مستطیل شکل را به یک مسیر باز در حال حاضر اضافه می کند.

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

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

ساخت ترکیب

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

تصویر حاصل به این شکل است:

اسکرین شات	نمونه زنده

ما این موضوع را با جزئیات پیش نمی بریم ، زیرا در واقع به طرز شگفت آور ساده است. مهمترین مواردی که باید به آن توجه داشته باشید استفاده از ویژگی FillStyle در زمینه نقاشی و استفاده از یک عملکرد ابزار (در این حالت گردآوری ()) است. استفاده از توابع ابزار برای بیت های نقاشی که انجام می دهید اغلب می تواند بسیار مفید باشد و میزان کد مورد نیاز و همچنین پیچیدگی آن را کاهش دهد.

ما با جزئیات بیشتر ، بعداً در این آموزش ، نگاهی دیگر به FillStyle خواهیم انداخت. در اینجا ، تنها کاری که ما انجام می دهیم استفاده از آن برای تغییر رنگ پر برای مسیرها از رنگ پیش فرض سیاه به سفید و سپس دوباره به عقب است.

اشیاء Path2d

همانطور که در مثال آخر مشاهده کردیم ، می توانید یک سری مسیرها و دستورات ترسیم برای ترسیم اشیاء بر روی بوم شما وجود داشته باشد. برای ساده کردن کد و بهبود عملکرد ، شیء PATH2D ، موجود در نسخه های اخیر مرورگرها ، به شما امکان می دهد این دستورات نقاشی را ذخیره یا ضبط کنید. شما می توانید به سرعت مسیرهای خود را بازی کنید. بیایید ببینیم که چگونه می توانیم یک شیء PATH2D را بسازیم:

سازنده PATH2D () یک شیء جدید PATH2D را که به تازگی با مسیر دیگری به عنوان یک آرگومان ایجاد می کند ، باز می گرداند (یک کپی ایجاد می کند) ، یا به صورت اختیاری با یک رشته متشکل از داده های مسیر SVG.

تمام روشهای مسیر مانند Moveto ، RETC ، ARC یا درجه دوم ، و غیره که در بالا با آنها شناختیم ، در اشیاء PATH2D در دسترس هستند.

API PATH2D همچنین راهی برای ترکیب مسیرها با استفاده از روش AddPath اضافه می کند. به عنوان مثال ، این می تواند مفید باشد که می خواهید اشیاء را از چندین مؤلفه بسازید.

با یک ماتریس تحول اختیاری مسیری را به مسیر فعلی اضافه می کند.

مثال Path2d

در این مثال ، ما یک مستطیل و یک دایره ایجاد می کنیم. هر دو به عنوان یک شیء PATH2D ذخیره می شوند ، به طوری که برای استفاده بعدی در دسترس هستند. با استفاده از API جدید PATH2D ، چندین روش به روز شد تا به صورت اختیاری یک شیء PATH2D را بپذیرند تا به جای مسیر فعلی از آن استفاده کنند. در اینجا ، از سکته مغزی و پر کردن با یک آرگومان مسیر استفاده می شود تا به عنوان مثال هر دو شی را روی بوم بکشید.

اسکرین شات	نمونه زنده

با استفاده از مسیرهای SVG

یکی دیگر از ویژگی های قدرتمند New Canvas Path2D API استفاده از داده های SVG Path برای اولیه سازی مسیرها در بوم شما است. این ممکن است به شما امکان دهد داده های مسیر را عبور داده و از آنها در هر دو ، SVG و بوم استفاده مجدد کنید.

مسیر به سمت نقطه (M10 10) حرکت می کند و سپس 80 امتیاز افقی به سمت راست (H 80) ، سپس 80 امتیاز به پایین (V 80) ، سپس 80 امتیاز به سمت چپ ( H-80) و سپس بازگشت بهشروع (Z). این مثال را می توانید در صفحه سازنده PATH2D مشاهده کنید.