دوره آموزشی یادگیری HTML Canvas

2 ساعت 10 دقیقهمتوسط2018-11-26

مدرسین

Joe Marini

Senior Developer Advocate at Google, Developer

جزئیات دوره

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

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

مهارت ها

HTMLJavaScriptOracleFront-End Web DevelopmentLearningWeb DevelopmentProgramming LanguagesOpen SourceSoftware Development

سرفصل ها

0. مقدمه

01 - برنامه نویسی گرافیک با جاوا اسکریپت
02 - آنچه باید بدانید

1. نمای کلی Canvas

03 - نمونه های جالب Canvas
04 - عنصر Canvas
05 - زمینه طراحی Canvas

2. تکنیک های اولیه طراحی Canvas

06 - رنگ ها و سبک ها
07 - مستطیل
08 - خطوط
09 - حالت Canvas
10 - کمان
11 - مسیرها
12 - منحنی های بیزیه و درجه دوم
13 - ترسیم متن

3. طراحی Canvas پیچیده

14 - کشیدن سایه
15 - استفاده از الگوها
16 - استفاده از گرادیان
17 - تصاویر و ویدئو
18 - برش مسیرها

4. Advanced Drawing APIs

19 - استفاده از ترجمه
20 - استفاده از مقیاس بندی
21 - استفاده از چرخش
22 - تحولات سفارشی
23 - Compositing و globalAlpha
24 - Compositing و globalAlpha مثال
25 - دستکاری پیکسل های خام

5. مثال های عملی

26 - ساخت یک نمایش اسلاید تصویر
27 - استفاده از انتقال های صاف
28 - انیمیشن پایه
29 - انیمیشن دو بافر

نتیجه

30 - مراحل بعدی