آموزش جامع Canvas در طراحی وب (پروژه محور)

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

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

در این دوره تمام توابع و نکات Canvas را به همراه مثال های متعدد بررسی می کنیم و در پایان چند پروژه کاربردی را با هم کدنویسی می کنیم.

اگر فرانت اند کار هستید و به HTML ،CSS و جی کوئری مسلط هستید الان وقت آن است که به یادگیری Canvas بپردازید تا سایت خودتان را یک سر و گردن از رقبا بالاتر ببرید. مطمئنا از یادگیری آن پشیمان نخواهید شد.

برای پیش نیاز این دوره باید تسلط نسبی به HTML و CSS داشته باشید و از آنجایی که دستورات Canvas با جاوا اسکریپت است آشنایی با این زبان نیز کار شما را راحت تر می کند البته سعی می کنم در طول دوره توضیحات مناسب جاوا اسکریپت را هم بدهم که اگر به جاوا اسکریپت مسلط نیستید به مشکل بر نخورید.

سرفصل های دوره:

قسمت اول: آغاز به کار Canvas و رسم اولین شکل

قسمت دوم: حل مشکل تغییر اندازه صفحه و کش آمدن ترسیمات!

قسمت سوم: رسم دایره و بیضی

قسمت چهارم: رسم خط و توابع BeginPath و ClosePath

قسمت پنجم: رسم منحنی با سه متد مختلف

قسمت ششم: نمایش تصویر در Canvas

قسمت هفتم: متن در Canvas

قسمت هشتم: رسم خط چین و توضیح الگو

قسمت نهم: نمایش سایه و رنگ های گرادیانت

قسمت دهم: تبدیلات

قسمت یازدهم: پارامترهای گلوبال

قسمت دوازدهم: توابع Restore و Save

قسمت سیزدهم: تابع Clip

قسمت چهاردهم: کلاس قدرتمند Path2D

قسمت پانزدهم: انیمیشن در Canvas

قسمت شانزدهم: پروژه اول - متحرک سازی کاراکتر ماریو

قسمت هفدهم: پروژه دوم - ذرات پراکنده در اطراف ماوس

پیش نیاز های دوره :

HTML/CSS

آموزش جامع Canvas در طراحی وب (پروژه محور)