html5는 캔버스를 사용하여 Super Mario_html5 튜토리얼 기술의 간단한 애니메이션을 구현합니다.

최근에는 캔버스라는 아주 핵심적인 요소가 포함된 HTML5를 배우고 있는데, 인터넷에서 게임 소스코드를 몇 개 다운받았는데, 이해는 되지만, 특정 기능을 개별적으로 추출하는 게 아직 어려워서 다시 인터넷에 접속했습니다. 몇 가지 예를 찾아본 끝에 슈퍼마리오의 단순한 애니메이션을 깨달았습니다.

디자인에 관여하는 주요 drawImage() 함수

(1) drawImage(image,x,y) 이 메소드는 가장 기본적인 연산 메소드로, 구체적으로는 왼쪽 위 모서리를 (0, 0) 원점으로 지정된 좌표축에서 작업하려는 전체 이미지 객체를 그려 그리려는 위치를 계산하는 것을 의미합니다.
(2) drawImage(image, x, y, 너비, 높이) 이 방법은 작업해야 하는 이미지 객체의 크기를 조정한 다음 작업판에 그리는 것을 의미합니다. 너비와 높이는 그린 후 이미지를 원하는 크기입니다
(3) drawImage (image, sourceX, sourceY ,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight) 이 방법은 가장 복잡하지만 꽤 유용합니다. 조작하려는 이미지 객체에서 위치 지정하려는 왼쪽 상단 모서리 위치(sourceX, sourceY)를 선택한 다음 원하는 너비와 높이(sourceWidth, sourceHeight)를 가로채서 가로채는 이미지를 아트보드에 그린다는 의미입니다. 해당 위치(destX, destY) 및 해당 범위(destWidth, destHeight) 내.

1. 먼저 인터넷에서 슈퍼마리오의 연속적인 걷기 동작 사진을 검색했습니다.

여기에서 mario.html이라는 이름의 새 html5 파일을 만듭니다. 캔버스 요소 정의, 애니메이션 시작 버튼, 애니메이션 정지 버튼

3. 관련 js 함수