Comentário: Estou aprendendo recentemente HTML5, que envolve um elemento muito crítico Canvas-Canvas. Após pesquisa e pesquisa, finalmente perceberei a simples animação de Super Mary. Vou compartilhar com você aqui, espero que seja útil para iniciantes.
Recentemente, eu estava aprendendo HTML5, que envolve o elemento muito crítico Canvas-Canvas. Eu baixei algum código -fonte do jogo online. Embora eu possa entender, ainda é difícil extrair uma certa função separadamente. Por isso, procurei alguns exemplos on -line e percebi a simples animação da Super Mary.A função principal drawImage () envolvida no design
(1) DrawImage (imagem, x, y) Este método é o método de operação mais básico. Especificamente, refere -se a representar todo o objeto de imagem que você deseja operar no eixo de coordenadas especificado, com o canto superior esquerdo sendo a origem (0,0) para calcular a posição que você deseja representar
(2) DrawImage (imagem, x, y, largura, altura) Este método refere -se à escala do objeto de imagem que você precisa operar e depois descrevê -lo na prancha de arte. Largura e altura são o tamanho que você deseja que a imagem seja desenhada depois de ser desenhada.
(3) DrawImage (imagem, sourcex, Sourcey, SourceWidth, SourceHeight, Destx, Desty, Destwidth, DestHeight) Este é o método mais complexo, mas também é bastante útil. Isso significa que, no objeto de imagem que você deseja operar, selecione a posição do canto esquerdo superior (SourceX, Sourcey) que deseja posicionar e interceptar a largura e a altura que deseja (largura de origem, o peso -fonte) e descreva a imagem interceptada na posição correspondente (Destx, Desty) e o intervalo correspondente (Desestwidth, destrenhas).
1. Primeiro, procurei fotos dos movimentos contínuos de Walking da Super Mary online (como mostrado abaixo)
2. Crie um novo arquivo html5, chamado Mario.html aqui, defina o elemento Canvas, iniciar o botão de início da animação e pausar o botão de parada de animação
3. Funções JS relacionadas