Html5 uses canvas to implement simple super Mary Animation

Comments: Recently I have been studying html5, which involves a key element canvas-canvas. After searching and researching, I have finally implemented a simple animation for super Mary. I would like to share with you the following, I hope to help beginners. I recently studied html5, which involves the canvas-canvas, a key element. I downloaded some game source code on the Internet. Although I can understand it, however, it is still difficult to extract a function separately. As a result, I searched for some examples on the Internet to implement a simple animation of super Mary.

The main drawImage () functions involved in the Design

(1) drawImage (image, x, y) is the most basic operation method. It refers to plotting the entire image object you want to operate on the specified axis, the upper left corner is the (0, 0) origin to calculate the position you want it to depict.
(2) drawImage (image, x, y, width, height) scales the image object you need to operate and then depicts it on the canvas, width and height are the sizes after the image is depicted.
(3) drawImage (image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, and destHeight) is the most complex method, but it is also quite useful. It indicates that in the image object you want to operate, select the position (sourceX, sourceY) in the upper left corner of the image object you want to locate, and then extract the width and height (sourceWidth, sourceHeight) you want ), the captured image is depicted within the position (destX, destY) and range (destWidth, destHeight) of the canvas.

1. First, I searched for a picture of super Mary's consistent walking behavior on the Internet (for example)
 
2.create an HTML 5 file named mario.html, define the canvas Element, start the animation, and stop the animation.
 
3. Related js Functions