HTML5 Canvas animation effect Implementation principle

Online Demo

Using the HTML5 canvas can help us quickly achieve simple animations with the following basic principles:

Draw the graph every time and clear the graphic to simulate an animation process that uses the Context.clearrect (0, 0, x, y) method to refresh the drawing that needs to be drawn

The first is the method of drawing the graph, as follows:

function myanimation () {    ctx.clearrect (0, 0, canvas_size_x, canvas_size_y);     if (X_icon < 0 | | X_icon > canvas_size_x- size_x) {        =-stepx;    }         if (Y_icon < 0 | | Y_icon > CANVAS_SIZE_Y- size_y) {        =-stepy;    }     + = stepx    ; + = stepy;    Ctx.drawimage (anim_img, X_icon, Y_icon);}

The above method clears the canvas content at regular intervals and recalculates the drawing position, which, once the canvas size is exceeded, reverses the coordinates of the drawing.

Here's how to actually draw the graph:

function Draw () {    var canvas = document.getElementById ("canvas");     = Canvas.getcontext ("2d");         New Image (size_x, size_y);         function () {        setinterval(' myanimation () ', 5);    }         = ' Http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png ';}

The above method will define the graph, and call the actual method of drawing animation, done!

If you are interested in HTML5 drawing animations, or want to learn how to simulate physical animation effects, read the interactive tutorials below that will help you understand the HTML canvas better:

Particle motion effect with HTML5 canvas

Original from: HTML5 Canvas animation effect Implementation principle

HTML5 Canvas Animation effect Implementation principle