Comentario: Estoy aprendiendo HTML5 recientemente, lo que implica un elemento muy crítico Canvas-Canvas. Después de la búsqueda y la investigación, finalmente me daré cuenta de la simple animación de Super Mary. Lo compartiré contigo aquí, espero que sea útil para principiantes.
Recientemente, estaba aprendiendo HTML5, que involucra el elemento muy crítico Canvas-Canvas. Descargué algún código fuente del juego en línea. Aunque puedo entenderlo, todavía es difícil extraer una determinada función por separado. Así que busqué algunos ejemplos en línea y me di cuenta de la simple animación de Super Mary.La función principal de DrawImage () involucrada en el diseño
(1) DrawImage (Image, X, Y) Este método es el método de operación más básico. Específicamente, se refiere a representar todo el objeto de imagen que desea operar en el eje de coordenadas especificado, siendo la esquina superior izquierda el origen (0,0) para calcular la posición que desea que represente
(2) DrawImage (Imagen, X, Y, Ancho, Altura) Este método se refiere a escalar el objeto de imagen que necesita para operar y luego representarlo en la tabla de arte. El ancho y la altura son del tamaño que desea que se dibuje la imagen después de que se dibuje.
(3) DrawImage (Image, SourceX, Sourcey, SourceWidth, SourceHeight, Destx, Desty, DestWidth, Destheight) Este es el método más complejo, pero también es bastante útil. Significa que en el objeto de imagen que desea operar, seleccione la posición de la esquina superior izquierda (SourceX, Sourcey) que desea posicionar, luego interceptar el ancho y la altura que desee (el ancho de origen, la fuente de fuente) y representar la imagen interceptada dentro de la posición correspondiente (Destx, Desty) y el rango correspondiente (Destwidth, DesthEight).
1. Primero, busqué fotos de los movimientos continuos de Super Mary's Walking en línea (como se muestra a continuación)
2. Cree un nuevo archivo HTML5, lo llamó Mario.html aquí, defina el elemento Canvas, inicie el botón de inicio de animación y pause el botón de parada de animación
3. Funciones JS relacionadas