HTML5 Canvas animation effect Implementation principle

Online Demo

Using the HTML5 Canvas can help us achieve simple animations at high speeds. Basic principles such as the following:

Draw graphics and clear graphics at a certain time to simulate an animation process that uses the Context.clearrect (0, 0, x, y) method to refresh the graphics that need to be drawn

The first is the method of drawing the graphic, such as the following:

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 a certain time. And once again the drawing position is calculated. Once the canvas size is exceeded. The inverse coordinates draw the graphic.

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 be a graphical definition, and call the actual method of drawing animation, done!

Let's say you are interested in HTML5 animation, or want to know how to simulate a physical animation effect. Please read the interactive tutorials below to 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