Comment: I am learning HTML5 recently, which involves a very critical element Canvas-canvas. After search and research, I will finally realize the simple animation of Super Mary. I will share it with you here, I hope it will be helpful to beginners.
Recently, I was learning html5, which involves the very critical element canvas-canvas. I downloaded some game source code online. Although I can understand it, it is still difficult to extract a certain function separately. So I searched for some examples online and realized the simple animation of Super Mary.The main drawImage() function involved in the design
(1) drawImage(image,x,y) This method is the most basic operation method. Specifically, it refers to depicting the entire image object you want to operate on the specified coordinate axis, with the upper left corner being the origin (0,0) to calculate the position you want it to depict
(2) drawImage(image,x,y,width,height) This method refers to scaling the image object you need to operate and then depicting it on the artboard. width and height are the size you want the image to be drawn after it is drawn.
(3) drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) This is the most complex method, but it is also quite useful. It means that in the image object you want to operate, select the upper left corner position (sourceX, sourceY) you want to position, then intercept the width and height you want (sourceWidth, sourceHeight), and depict the intercepted image within the corresponding position (destX, destY) and the corresponding range (destWidth, destHeight).
1. First, I searched for pictures of Super Mary's continuous walking movements online (as shown below)
2. Create a new html5 file, named it mario.html here, define the canvas element, start animation start button, and pause animation stop button
3. Related js functions