의견 : 최근에 HTML5를 배우고 있습니다. 여기에는 매우 중요한 요소 Canvas-Canvas가 포함됩니다. 검색과 연구 후에는 마침내 Super Mary의 간단한 애니메이션을 깨달을 것입니다. 여기서 당신과 공유하겠습니다. 초보자에게 도움이되기를 바랍니다.
최근에, 나는 매우 중요한 요소 캔버스-캔버스를 포함하는 HTML5를 배우고있었습니다. 온라인으로 게임 소스 코드를 다운로드했습니다. 이해할 수는 있지만 특정 기능을 별도로 추출하는 것은 여전히 어렵습니다. 그래서 나는 온라인으로 몇 가지 예를 검색하고 Super Mary의 간단한 애니메이션을 깨달았습니다.기본 DrawImage () 기능과 관련된 기능
(1) DrawImage (image, x, y)이 방법은 가장 기본적인 작동 방법입니다. 구체적으로, 지정된 좌표 축에서 작동하려는 전체 이미지 객체를 나타내는 것을 의미하며, 왼쪽 상단 코너는 원점 (0,0)입니다.
(2) DrawImage (이미지, x, y, 너비, 높이)이 방법은 작동하는 데 필요한 이미지 객체를 스케일링 한 다음 아트 보드에서 묘사하는 것을 의미합니다. 너비와 높이는 이미지가 그려진 후에 그려지기를 원하는 크기입니다.
(3) DrawImage (image, sourcex, sourcey, sourcewidth, sourceHeight, destx, desty, destwidth, destHeight) 이것은 가장 복잡한 방법이지만 매우 유용합니다. 이는 작동하려는 이미지 객체에서 왼쪽 상단 모서리 위치 (Sourcex, Sourcey)를 선택한 다음 원하는 너비와 높이 (SourceWidth, SourceHeight)를 가로 채고 해당 위치 (Destx, Desty) 및 해당 범위 (Destwidth, DestHeight) 내의 가로 채기 된 이미지를 나타냅니다.
1. 첫째, 나는 온라인으로 Super Mary의 지속적인 걷기 운동 사진을 검색했습니다 (아래 그림과 같이).
2. 새 html5 파일을 만들고 Mario.html이라는 이름을 여기, 캔버스 요소를 정의하고 애니메이션 시작 버튼을 시작하고 애니메이션 중지 버튼을 일시 중지합니다.
3. 관련 JS 기능