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?