html5 canvas: animation - csuohio.educis.csuohio.edu/.../lecture_wangch12a-move-image_2.pdf ·...

HTML5 CANVAS:ANIMATION

Part 1

Make an Image Move

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 1

In this lecture, you will learn:

• how to write JavaScript to make an image on a canvas element move

• how to animate morphing between two curves

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 2

Animation

• Like video

• A sequence of images• Create illusion of movement when played in succession

• Commonly used in multimedia projects

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 3

Basic Ideas of Scripting an Animation on a Canvas

Similar to how chalkboard animation works

1. Draw on a chalkboard, take a snapshot to use as the first frame of your animation

2. Erase the chalkboard, draw a different content, take a snapshot to use as the second frame of your animation,

3. Repeat the erasing and drawing until you get all the frames you need for your animation

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 4

General Structure of Scriptfunction animate()

{

statement(s) that make a stepwise change of the visual content

window.requestAnimationFrame(animate);

}

window.requestAnimationFrame(animate);

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 5

tells the browser to invoke the specified function, animate() in this case

General Structure of Scriptfunction animate()

{

statement(s) that make a stepwise change of the visual content

window.requestAnimationFrame(animate);

}

window.requestAnimationFrame(animate);

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 6

But this statement is also in the animate() function.

Thus, the function animate() will keep going and going and going ...

HOW TO USE THE SCRIPT TO MAKE AN

IMAGE MOVE

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 7

<canvas id="gameCanvas" width="1136" height="640">

Your browser does not support canvas.</canvas>

<script>

var myCanvas = document.getElementById("gameCanvas");

var myContext = myCanvas.getContext("2d");

var balloon = new Image();

balloon.src = "images/water-balloon.png";

var y = 0;

balloon.onload = function () {

animate();

};

function animate()

{

y += 2;

myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);

myContext.drawImage(balloon, 300, y);

window.requestAnimationFrame(animate);

}

</script>© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 8

After finished loading

an image, start the function animate()

At the end of animate(), invoke

the function animate() again

Organizing the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 9

1. Take care of checking image loading2. Invoke startGame()when images

are ready

Organizing the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 10

Use requestAnimationFrame() to

invoke drawGame()

Organizing the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 11

1. Erase everything

2. Draw the image3. Use requestAnimationFrame() to

invoke drawGame()

Organizing the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 12

1. Update position2. Use setTimeout() to invoke

updateGame() in a specific timing

ANIMATING SHAPESExample: Morphing two shapes

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 13

Morphing from one to the other

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 14

wings up wings down

Overview of the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 15

Invoke startGame()

Overview of the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 16

Use requestAnimationFrame() to invoke drawGame()

Overview of the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 17

1. Erase everything

2. Draw a quadratic curve different from

last time3. Use request AnimationFrame()

to invoke drawGame()

Overview of the Code

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 18

1. Update the change for the quadratic

curve2. Use setTimeout() to invoke

updateGame() in a specific timing

Review Question

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 19

Fill in the blanks

with the following:drawGame()

main()

startGame()

updateGame()

Answer

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 20

Review Question

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 21

When you animate

an image moving

down, in which

function do you

increase the

image's y?

Answer

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 22

When you animate

an image moving

down, in which

function do you

increase the

image's y?

Review Question

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 23

When you animate

morphing two

curves, in which

function do you

set the change?

Answer

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 24

When you animate

morphing two

curves, in which

function do you

set the change?

Review Question

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 25

At the beginning of

which function do

you erase

everything on the

canvas?

Answer

© 2016 Pearson Education, Inc., Hoboken, NJ. All

rights reserved. 26

At the beginning of

which function do

you erase

everything on the

canvas?