HTML5 use canvas to achieve Super Mary simple animation

Recently in the study of HTML5, it involves a very critical element canvas-canvas, downloaded some game source code on the net, although can understand, but want to separate for a function to extract out or have difficulty, so oneself and go online to look for some examples, just will super Mary simple animation to achieve.

The main drawimage () functions involved in the design

(1) drawImage (Image,x,y) This method is the most basic mode of operation, specifically refers to your entire operation of the image object on the specified axis, the upper left corner (0,0) as the origin, to calculate the position you want it to depict

(2) DrawImage (image,x,y,width,height) means to scale the image object you need to manipulate and then paint it on the artboard, and width and height are the sizes you want the picture to be.

(3) DrawImage (image,sourcex,sourcey,sourcewidth,sourceheight,destx,desty,destwidth,destheight)  This is the most complicated way, But it's also quite useful. It means that in the image object you want to manipulate, select the position you want to position in the upper left corner (Sourcex,sourcey), and then intercept the width and height (sourcewidth,sourceheight) you want, and intercept the The image is depicted in the corresponding position of the artboard (destx,desty) and within the corresponding range (destwidth,destheight).

1. First on the Internet to find the next super Marie-linked walking action pictures (pictured below),

2. Create a new HTML5 file named mario.html, define canvas element, start animation Start button, pause animation stop button

3. Related JS function