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를 참고해주세요. 중국사이트(www.php.cn)!
관련 기사:
HTML5 Canvas를 사용하여 3D 애니메이션 효과를 만드는 방법