پیشنهاد فرادرس

آموزش مقدماتی HTML5 Canvas

دسته بندی ها: آموزش طراحی وب ، آموزش HTML ، آموزش های پلورال سایت (Pluralsight) ، آموزش Canvas

آموزش-مقدماتی-html5-canvas

canvas یکی از عناصر HTML5 برای طراحی گرافیک در صفحه وب می باشد.canvas در html5 به وسیله یک اسکریپت کار می کند. عنصر <canvas> در html5 تنها برای گرافیک مورد استفاده قرار می گیرد. عنصر <canvas> دارای چندین خاصیت برای ایجاد جعبه,دایره,چهار ضلعی و اضافه کردن تصویر می باشد. در نگاه کلی canvas برای کشیدن چهار ضلعی ها با رنگ های مختلف,چهار ضلعی هایی با تدارج رنگ,چهار ضلعی هایی با رنگ های مختلف و متن هایی با رنگ های مختلف مورد استفاده قرار می گیرد.

در این دوره آموزشی از شرکت Pluralsight نحوه کار با Canvas در HTML5 را فرامیگیرید.

عنوان دوره آموزشي: HTML5 Canvas Fundamentals سطح: متوسط مدت زمان: 4 ساعت و 32 دقيقه نويسنده: Dan Wahlinليست سرفصل هاي اين دوره آموزشي:

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	
TDrawing 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	
TManipulating 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	
TBuilding 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

 

حجم فايل: 722MB

Pluralsight HTML5 Canvas Fundamentals

پیشنهاد فرادرس