HTML5 Canvas 애니메이션 효과 그래픽 코드 데모

HTML5 캔버스 애니메이션 효과 시연

주요 아이디어:

먼저 연속된 프레임으로 그림을 준비한 후 HTML5 Canvas의 그리기 방식을 이용하여 시간

간격으로 서로 다른 프레임을 그려 애니메이션이 재생되는 것처럼 보이게 합니다.

핵심 기술 포인트:

JavaScript 함수 setTimeout()에는 두 개의 매개 변수가 있습니다. 매개변수는 JavaScript 메소드

를 전달할 수 있으며 다른 매개변수는 간격(밀리초)을 나타냅니다. 코드 예:

setTimeout(update, 1000/30);

Canvas API-drawImage() 메소드, 9개 모두 지정해야 함 매개변수:

ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);

여기서 offw, offh는 원본 이미지의 시작 좌표점을 나타내고, width, height는 원본 이미지의 너비와 높이를 나타내며, x2, y2는 원본 이미지의 시작점을 나타내는

을 나타냅니다. 대상 캔버스 좌표점의 이미지.

22프레임 기러기 비행 사진의 효과:

원본 이미지:

프로그램 코드:

투명한 PNG 형식을 업로드하는 데 문제가 있어서

불투명한 이미지를 업로드했습니다. 교체 후 다른 사진으로 대체 가능합니다

최대 프레임 수를 22에서 실제 프레임 수로 수정하여 실행하세요.

위는 HTML5 Canvas 애니메이션 효과 그래픽 코드 데모 내용입니다. 더 많은 관련 내용은 PHP를 참고해주세요. 중국사이트(m.sbmmt.com)!

관련 기사:

HTML5 Canvas를 사용하여 3D 애니메이션 효과를 만드는 방법

CSS3 애니메이션은 5가지 사전 로드 애니메이션 효과를 구현합니다

CSS3 애니메이션 효과 요약 분석