HTML5 Canvas بستری قدرتمند را برای رندر کردن گرافیک‌ها، نمودارها و دیگر انواع داده‌های تصویری بدون تکیه بر پلاگین‌هایی مانند Flash و یا Silverlight فراهم می‌کند. با استفاده از مفاهیم و تکنیک‌های موجود در این دوره‌ی آموزشی تصویری با ویژگی‌های کلیدی موجود در رابط کاربردی برنامه‌نویسی Canvas آشنا شده و چگونگی استفاده کردن از آن جهت رندر نمودن اشکال، متن، ویدئو، تصاویر و بسیاری عناصر تصویری دیگر را یاد خواهید گرفت.
محتوای آموزش:
1- آشنایی با کاربردهای عمومی HTML5 Canvas
2- ترسیم با HTML5 Canvas
3- دستکاری پیکسل‌ها
4- ساخت دیتا چارت سفارشی
تولید کننده: Pluralsight
تاریخ انتشار: 12-06-2012
سطح: متوسط
مدت زمان آموزش: 4 ساعت و 32 دقیقه
مدرس: Dan Wahlin
فهرست کامل سرفصل‌ها و عناوین آموزش (به همراه زمان دقیق آنها) :
Getting Started with the HTML5 Canvas - 00:41:26
Introduction - 03:28
HTML5 Canvas Usage Scenarios - 04:49
Demo: Game Demos - 05:57
Demo: Engaging Applications - 02:29
Demo: Charting - 02:15
HTML5 Canvas Fundamentals - 05:29
Hello World Demo - 09:05
Overview of the Canvas API - 03:53
Demo: Canvas API Documentation - 02:50
Summary - 01:11
Drawing with the HTML5 Canvas - 01:32:31
Introduction - 01:12
Drawing Rectangles and Ellipses - 05:48
Demo: Simple Bar Chart - 12:06
Demo: Simple Bar Chart with Transforms - 07:17
Demo: Drawing Circles - 08:19
Demo: Using arcTo() - 05:13
Drawing Lines and Paths - 05:23
Demo: Drawing Lines - 06:20
Demo: Simple Line Chart - 04:14
Demo: Using bezierCurveTo() - 03:03
Demo: Using quadraticCurveTo() - 03:17
Drawing Text - 01:24
Demo: Filling, Stroking, and MeasuringText - 03:59
Demo: Using Canvas Transforms with Text - 05:50
Drawing Images - 01:49
Demo: Using Image Functions - 09:59
Drawing Video - 01:26
Demo: Syncing Video with a Canvas - 04:37
Summary - 01:15
Manipulating Pixels - 01:15:11
Introduction - 01:18
Rendering Gradients - 04:37
Demo: Creating Linear Gradients - 03:43
Demo: Creating Radial Gradients - 04:31
Using Transforms - 07:59
Demo: Getting Started with Transform Functions - 05:09
Demo: Using transform() and setTransform() - 04:53
Accessing Pixels - 08:15
Demo: Creating Pixels Dynamically - 08:50
Demo: Grayscale Pixels - 05:28
Animation Fundamentals - 06:09
Demo: Getting Started with Animation - 06:01
Demo: Using Gradients, Transforms, and Animations - 07:31
Summary - 00:47
Building a Custom Data Chart - 01:03:33
Introduction - 01:48
Creating the CanvasChart Object - 04:12
Creating the CanvasChart Shell Code - 10:04
Rendering Text and Gradients - 07:41
Rendering Data Points Text and Guide Lines - 08:23
Connecting Data Point Lines - 07:48
Rendering Data Points - 04:24
Adding Animation - 09:27
Adding Overlays and Interactivity - 08:31
Summary - 01:15
نکات:
1- این آموزش به زبان انگلیسی است.
2- آموزش به صورت فیلمهای جداگانه برای هر فصل است.
3- فرمت فایلها MP4 است.
4- فایل های دانلودی قابلیت تعمیر با WinRAR در صورت دانلود ناقص را دارا می باشند.