Commentaire: J'apprends récemment HTML5, qui implique un canevas de toile d'élément très critique. Après la recherche et la recherche, je réaliserai enfin l'animation simple de Super Mary. Je vais le partager avec vous ici, j'espère que ce sera utile aux débutants.
Récemment, j'apprenais HTML5, qui implique le canivas d'élément très critique. J'ai téléchargé un code source de jeu en ligne. Bien que je puisse le comprendre, il est toujours difficile d'extraire une certaine fonction séparément. J'ai donc recherché quelques exemples en ligne et réalisé l'animation simple de Super Mary.La fonction principale DrawImage () impliquée dans la conception
(1) DrawImage (image, x, y) Cette méthode est la méthode de fonctionnement la plus élémentaire. Plus précisément, il fait référence à la représentation de l'objet d'image entier que vous souhaitez opérer sur l'axe de coordonnées spécifié, le coin supérieur gauche étant l'origine (0,0) pour calculer la position que vous souhaitez qu'il représente
(2) DrawImage (image, x, y, largeur, hauteur) Cette méthode fait référence à la mise à l'échelle de l'objet d'image dont vous avez besoin pour fonctionner, puis à le représenter sur le tableau artistique. La largeur et la hauteur sont de la taille que vous souhaitez que l'image soit dessinée une fois qu'elle est dessinée.
(3) DrawImage (Image, Sourcex, Sourcey, SourceWidth, SourceHeight, Destx, Desty, Destwidth, Desstheight) C'est la méthode la plus complexe, mais elle est également très utile. Cela signifie que dans l'objet d'image que vous souhaitez fonctionner, sélectionnez la position du coin supérieur gauche (sourcex, sourcey) que vous souhaitez positionner, puis intercepter la largeur et la hauteur que vous souhaitez (SourceWidth, SourceHeight), et représenter l'image interceptée dans la position correspondante (Destx, Desty) et la plage correspondante (Deswidth, Destheight).
1. Premièrement, j'ai cherché des photos des mouvements de marche continue de Super Mary en ligne (comme indiqué ci-dessous)
2. Créez un nouveau fichier HTML5, nommé Mario.html ici, définissez l'élément Canvas, le bouton Démarrer l'animation et le bouton d'arrêt de l'animation en pause
3. Fonctions JS connexes