قیمت این دوره: رایگانــ
  • مدرس دوره : حمیدرضا درویش زاده
  • تعداد ویدیوها : 18 ویدیو
  • مدت زمان دوره : 6:14:00
  • سطح دوره : متوسط
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1401/08/03
آموزش جامع Canvas در طراحی وب (پروژه محور)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 



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

  1. HTML/CSS

فهرستـــ ویدیوها

مدت زمان دوره 6:14:00
  • لطفا در صورت اقدام به دانلود تا انتها فرایند دانلود ، این صفحه را باز نگاه دارید.

1
  • ویدیو معرفی

00:09:59

ویدیو معرفی

2
  • آغاز به کار Canvas و رسم اولین شکل

00:23:39

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

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

00:09:00

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

4
  • رسم دایره و بیضی

00:19:06

رسم دایره و بیضی

5
  • رسم خط و توابع BeginPath و ClosePath

00:15:44

رسم خط و توابع BeginPath و ClosePath

6
  • رسم منحنی با سه متد مختلف

00:22:31

رسم منحنی با سه متد مختلف

7
  • نمایش تصویر در Canvas

00:21:04

نمایش تصویر در Canvas

8
  • متن در Canvas

00:29:23

متن در Canvas

9
  • رسم خط چین و توضیح الگو

00:25:58

رسم خط چین و توضیح الگو

10
  • نمایش سایه و رنگ های گرادیانت

00:22:35

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

11
  • تبدیلات (انتقال، جابجایی و چرخش)

00:34:18

تبدیلات (انتقال، جابجایی و چرخش)

12
  • پارامترهای گلوبال

00:25:14

پارامترهای گلوبال

13
  • توابع Restore و Save

00:15:25

توابع Restore و Save

14
  • تابع Clip

00:20:52

تابع Clip

15
  • کلاس قدرتمند Path2D

00:17:16

کلاس قدرتمند Path2D

16
  • انیمیشن در Canvas

00:10:21

انیمیشن در Canvas

17
  • پروژه اول - متحرک سازی کاراکتر ماریو

00:16:26

پروژه اول - متحرک سازی کاراکتر ماریو

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

00:35:14

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


نظرات کاربران در رابطه با این دوره

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