Комментарий: я недавно изучаю HTML5, который включает в себя очень важные элементы Canvas-Canvas. После поиска и исследований я наконец осознаю простую анимацию Super Mary. Я поделюсь этим с вами здесь, я надеюсь, что для начинающих будет полезно.
Недавно я изучал HTML5, который включает в себя очень важные элементы Canvas-Canvas. Я скачал немного игрового исходного кода онлайн. Хотя я могу понять это, все еще трудно извлечь определенную функцию отдельно. Поэтому я искал некоторые примеры в Интернете и осознал простую анимацию Super Mary.Основная функция DrawImage (), участвующая в дизайне
(1) Drawmage (Image, x, y) Этот метод является самым основным методом работы. В частности, это относится к изображению всего объекта изображения, которым вы хотите использовать на указанной оси координат, причем верхний левый угол является источником (0,0), чтобы рассчитать положение, которое вы хотите, изобразили, чтобы изобразить
(2) DrawMage (изображение, x, Y, ширина, высота) Этот метод относится к масштабированию объекта изображения, который вам необходимо работать, а затем изображение его на артборде. Ширина и высота - это размер, который вы хотите, чтобы изображение было нарисовано после его натяжения.
(3) DrawMage (Image, SourceX, Sourcey, SourceWidth, SourceHeight, Destx, Desty, DestWidth, Destheight) Это самый сложный метод, но он также довольно полезен. Это означает, что в объекте изображения вы хотите работать, выберите позицию верхнего левого углу (Sourcex, Sourcey), который вы хотите позиционировать, затем перехватить желаемой ширины и высоты (источник -Withidth, SourceHeight) и изобразите перехваченное изображение в соответствующей позиции (Destx, Desty) и соответствующий диапазон (Destwidth, DestHeight).
1. Во -первых, я искал фотографии непрерывных ходячих движений Super Mary (как показано ниже)
2. Создайте новый файл HTML5, названный его Mario.html здесь, определите элемент Canvas, кнопку запуска начала анимации и кнопку остановки анимации пауза
3. Связанные функции JS