Html5 uses canvas to implement simple walk-around

I recently learned html5, which involves a key element canvas-canvas. 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

2.create an HTML 5 file named mario.html, define the canvas Element, start the animation, and stop the animation.

 

 

 

3. Related js Functions