Html5 Canvas 예비 연구 노트(14) - 간단한 애니메이션 구현

이전에는 간단한 스틸 그림이었습니다. 이 글에서는 간단한 애니메이션 효과를 구현했습니다.

는 캐릭터를 대각선 아래로 움직이게 하는 코드입니다.

입니다. 크게 두 가지 함수로 구성됩니다. 먼저 페이지가 로드되면

init 함수가 호출됩니다. 먼저 init 함수를 살펴보겠습니다. >init 이 함수는 먼저 초기화 내용, 컨텍스트 획득 등의 몇 문장을 포함하고 그림 개체를 생성합니다.

this.image = new Image();
this.image.src = "grossini.png";
this.image.onload = function(){
   setTimeout(update,33);
}

이는 이전에 주로

src

경로 개체를 정의한 다음 onload 기능을 제공하기 위해 언급한 바 있습니다. 이전에 그림을 그리고 있었는데 여기서는 setTimeoutupdate 함수를 가끔씩 호출합니다. 그 기능은 다음과 같습니다. 지속적으로 캔버스를 업데이트합니다.

update

함수를 살펴보고 먼저 clearRect를 호출하여 화면을 비운 다음 그림을 그리면, 그런 다음 주인공의 위치를 ​​업데이트하고, 마지막으로 setTimeout을 호출하고 update가 루프에서 호출되도록 합니다 위 내용은 Html5, Canvas, simple 입니다. 애니메이션 내용에 대해서는 PHP 중국어 홈페이지(www.php.cn)에 더 많은 관련 내용이 있으니 참고해주세요!