Creating an animating clock | 02Skills

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Mastering HTML5 Canvas API

Getting Started with HTML5 Canvas

Global Overview & Downloads
Overview
Preparing our JavaScript for Canvas (10:07)
Canvas Hello World (6:35)
The Palau flag and the perfect circle (5:16)
Creating Canvas elements dynamically (6:24)
References and further reading

Creating Shapes using Paths

Overview
Drawing our first canvas lines (10:20)
Meeting canvas paths (5:42)
Drawing triangles with paths (8:34)
Creating the Flag of Guyana (12:58)
Creating Multi Pointed Shapes ( Kingdom of Bahrain ) (9:04)
References and further reading

Drawing with Angles

Overview
Working with sine, cosine and radians (12:09)
Creating an animating clock (10:14)
Creating Complex Shapes (11:01)
Adding more vertices (12:31)
Overlapping shapes to create other shapes (7:33)
References and further reading

From Curves to gradients

Overview
Drawing arcs (7:10)
Drawing with quadratic curves (1 control point) (7:37)
Drawing with bezier curves (2 control point) (4:54)
Drawing images into canvas (7:21)
Creating an interactive linear Gradient (9:23)
Working with interactive Radial Gradient (6:25)
References and further reading

Manipulating the canvas

Overview
Working with Text (8:50)
Pixel manipulation (7:26)
The Art of clipping (9:15)
Transforming the canvas (5:53)
scale, rotate and translate (6:26)
References and further reading

Teach online with

Creating an animating clock

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock