HTML5 Canvas animation effect demonstration

Main idea:

First, prepare a picture with consecutive frames, and then use the draw method of HTML5 Canvas to draw different frames at different time

intervals, so that it looks like the animation is playing.

Key technical points:

The JavaScript function setTimeout() has two parameters. The first one is that the parameter can Pass a JavaScript method,

The other parameter represents the interval, in milliseconds. Code example:

setTimeout(update, 1000/30);

Canvas API-drawImage() method, all 9 need to be specified Parameters:

ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);

where offw, offh refer to the starting coordinate point of the source image, width, height represent the width and height of the source image, x2, y2 represent the starting point of the source image on the target Canvas Coordinate points.

The effect achieved by a 22-frame wild goose flying picture:

## Source image:

Program code:

        
  
HTML Canvas Animations Demo - By Gloomy Fish
 
Play Animations
        

         
        

         Copy after login
        
       

opaque images. You can replace it with other pictures. After replacement,

please modify the maximum frame number from 22 to your actual frame number to run.

Related articles:

How to use HTML5 Canvas to create 3D animation effects

CSS3 animation to achieve 5 preload animation effects

Summary analysis of css3 animation effects