Html5 Canvas Preliminary Study Notes (14) - Simple animation implementation

Before, it was a simple still drawing. This article implements a simple animation effect. The effect is as follows:

is to make the character move diagonally downward. The code is as follows:

It is mainly composed of two functions. First, The init function is called when the page is loaded. First let’s look at the init function, init The function first contains a few sentences of initialization content, obtaining context, etc., and then generates a picture object. Generating a picture object mainly consists of the following sentences:

this.image = new Image();
this.image.src = "grossini.png";
this.image.onload = function(){
   setTimeout(update,33);
}

This was mentioned before, mainly to first give Define the src path object, and then when the onload function is called, we were drawing the picture before, here we call setTimeoutCalling the update function every once in a while, its function is to continuously update the canvas.

Look at the update function, first call clearRect to clear the screen, then draw the picture, and then update the position of the protagonist ,, finally call setTimeout to let update be called in a loop

The above is Html5, Canvas, simple For animation content, please pay attention to the PHP Chinese website (m.sbmmt.com) for more related content!