Creating a basic animation


show more Creating a basic animation provides you with in-depth training on Developer. Taught by Joe Marini as part of the HTML5: Graphics and Animation with Canvas show less
please wait ...

Creating a basic animation

Part of the fun of working with HTML5 canvas is that you can learn how to do things like animation. So in this movie, we are going to see how to use the canvas and some JavaScript logic to make a basic animation sequence. So let me show you what it looks like. So here, I have a canvas that's light blue with a rectangle, in this case a square, that has a yellow interior and a red stroke that's just moving from left to right across the canvas, and when it disappears from view over here, it reappears over here.

So let's see how we built this. So I am going to open up my start version of the file, and what we are going to do is we are going to take a look at the snippets code. So for the simple animation, let's go ahead and copy over the first few lines which initialize everything, and we will paste that in there. So I have got some initialization logic here. I have got some variables for the rectangle. The Y value is 200, the width is 40, and then I've got an X position whi...

Creating a basic animation
Video duration: 5m 42s 3h 7m Intermediate

Viewers:

Creating a basic animation provides you with in-depth training on Developer. Taught by Joe Marini as part of the HTML5: Graphics and Animation with Canvas

Subjects:
Developer Web
Software:
HTML
Author:
please wait ...