지난 글에서는 캔버스를 사용하여 그래픽을 그리는 방법을 공유했지만, 그림은 모두 정적인 그래픽이었습니다. 이번 주에는 캔버스를 사용하여 동적 그래픽을 그리는 방법을 알아보겠습니다.
애니메이션이란 무엇입니까?애니메이션을 그리기 전에 애니메이션이 무엇인지 먼저 이해해야 합니다. 애니메이션에 필요한 최소한의 기본 조건은 무엇인가요?
애니메이션을 표시하기 위해 도구를 무엇을 사용할 수 있습니까?
PPT를 이용하여 그린 애니메이션 효과입니다.
위 PPT에서 그린 애니메이션 효과에 따르면, 여러 PPT 페이지를 빠르게 전환하면 애니메이션 효과가 나타나는 것을 알 수 있습니다.
이는 애니메이션 구현의 기본 요소입니다.
단위 시간당 여러 장의 사진을 연속적으로 재생합니다. 이 단위 시간은 일반적으로 초 단위로 측정됩니다. 컴퓨터 렌더링 그래픽에서 충분히 부드러운 비디오를 얻으려면 초당 사진 수가 모니터의 새로 고침 빈도보다 크거나 같아야 합니다(이 새로 고침 빈도는 일반적으로 60hz입니다).
각 사진 속 물체의 상태(크기, 모양, 색상, 위치, 각도 등)가 변경되어야 합니다.
그렇다면 캔버스에서 이 두 가지 조건을 어떻게 구현합니까?
1초에 60개의 그래픽을 그리는 방법이를 1/60초마다 그래프를 그리는 것으로 변환할 수 있습니다. JavaScript에서는 가끔씩 무언가를 하고 싶을 때 사용하는 방법은 타이머 setinterval을 사용하는 것입니다.
타이머란 무엇입니까? setinerval（function f(){}，t）， 두 개의 매개변수가 타이머에 전달될 수 있습니다. 하나는 함수이고 다른 하나는 시간입니다. 이 코드의 의미는 t ms마다 함수 f를 실행한다는 것입니다.
그런 다음 이를 사용하여 1/60초마다 그래프를 그리는 데 필요한 것을 달성합니다.
setInterval(function(){canCon.fillStyle=black;//canCon.fill은 펜을 들고 이 라이스 페이퍼에 입체적인 그래픽을 그리는 것을 의미하고, //style=black은 검정 잉크에 담그는 것을 //계속해서 살펴보는 것을 의미합니다. 솔리드 그래픽을 그리기 위해 펜을 들고 검정 잉크로 붙이기만 하면 됩니다. canCon.arc(233,233,66,0,Math.PI*2); //라이스 페이퍼에 원을 그리는 것을 고려합니다(중심의 X 위치, Y 위치, 원의 반경, 원 그리기를 시작할 위치 및 끝낼 위치). //Last 획을 그립니다},1000/60 )최종 효과
하지만 아직 애니메이션 효과는 없습니다. 1초 안에 그려진 60개의 그래픽은 모두 똑같기 때문에 각 그래픽을 그릴 때 요소의 상태를 변경해야 합니다.
그런데 스커트를 추천해드리고 싶은데요 앞부분은 537, 중간부분은 631, 마지막 부분은 707 입니다. 프론트엔드를 배우고 싶은 친구들은 우리와 함께 배우고 서로 도움을 받을 수 있습니다. 매일 밤 무료 라이브 수업을 제공하는 마스터가 있습니다. 배우고 싶지 않으면 참여하지 마세요.
(537-631-707)
요소의 상태를 변경하는 방법은 무엇입니까?
원의 위치는 원의 중심 좌표에 의해 결정되므로 캔버스를 그릴 때마다 요소의 위치를 변경할 수 있습니다.
variable=100;//원의 초기 중심 위치를 지정하고 원 중심의 y 위치는 그려질 때마다 거리만큼 아래로 이동합니다. setInterval(function(){canCon.fillStyle=black;// canCon.fill은 펜을 들고 이 라이스 페이퍼에 단단한 모양을 그리는 것을 의미하고, //style=black은 펜을 담그는 것을 의미합니다. 검정 잉크 //연결하려면 단색 그래픽을 그리기 위한 펜을 들고 검정 잉크 canCon.arc(233,y++,66,0,Math.PI*2);//라이스 페이퍼에 붙이면 됩니다. 원을 그립니다(원 중심의 X 위치, Y 위치, 원의 반경, 원 그리기를 시작할 위치 및 끝낼 위치). canCon.fill();//그릴 마지막 스트로크} ,1000/60)이때 우리가 보는 것은 움직이는 원이 아니라 확장된 진행률 표시줄과 비슷합니다. 그 이유는 사실 매우 간단합니다. 우리는 새로운 그래픽을 그릴 때마다 원본 그래픽을 지우지 않습니다. 이러한 그림은 n개의 여러 그래픽을 겹쳐 놓은 결과입니다. 그러면 새로운 그래픽을 그릴 때마다 원래 그래픽을 지워야 합니다. 그러면 어떻게 해야 할까요?
variable=100;//원의 초기 중심 위치를 지정하고 원 중심의 y 위치는 그려질 때마다 아래로 거리만큼 이동합니다. setInterval(function(){canCon.clearRect(0, 0, 500, 500);/ /사각형 영역의 왼쪽 위 모서리 좌표와 직사각형의 너비와 높이를 삭제합니다. canCon.fillStyle=black;//canCon.fill의 의미는 이 쌀 위에 그림을 줍는다는 것입니다. 종이 단색 그래픽이 있는 펜, //style=black은 검정 잉크에 담그는 것을 의미합니다. //뭉치려면 단색 그래픽을 그리는 펜을 집어 검정 잉크로 붙인다는 의미입니다. canCon.arc(233,y++,66 , 0,M ath.PI*2);//라이스 페이퍼에 원을 그리는 것을 고려합니다(원 중심의 X 위치, Y 위치, 원의 반경, 원 그리기 시작 위치 및 끝 위치). );// 페인팅 시작},1000/60)하지만 현재로서는 아무런 효과가 없습니다. 그렇다면 정확히 무슨 일이 일어나고 있는 걸까요? 우리가 어렸을 때 그림을 그리던 장면을 떠올려보면, 도화지의 특정 부분을 지울 때 먼저 붓을 들어 올려서 지우개를 사용하여 종이의 특정 부분을 지울 수 있을까요? , 그래서 우리는 캔버스의 영역을 지우기 전에 펜을 들어야 합니다.
variable=100;//원의 초기 중심 위치를 지정하고 원 중심의 y 위치는 그려질 때마다 아래로 거리만큼 이동합니다. setInterval(function(){canCon.beginPath();// 펜을 위로 들어올립니다. canCon.clearRect(0, 0, 500, 500);//사각형 영역의 왼쪽 상단 좌표와 직사각형의 좌표를 삭제합니다. 너비 및 높이 canCon.fillStyle=black;//canCon.fill은 펜을 집어 이 라이스페이퍼에 입체적인 그래픽을 그리는 것을 의미하고, //style=black은 검정 잉크에 담그는 것을 의미하며//함께 연결하면, 입체 모양을 그리기 위해 펜을 들고 검정 잉크를 붙입니다. canCon.arc(233,y++,66,0,Math.PI*2); //라이스 페이퍼에 원을 그리는 것을 고려합니다(중심의 X 위치, Y 위치, 원의 반경, 원 그리기를 시작할 위치 및 끝낼 위치). //Last 획을 그립니다},1000/60 )이런 식으로 우리는 움직이는 원을 얻을 수 있습니다
요약위 내용은 동적 그래픽 기능을 구현하기 위한 H5의 가장 강력한 인터페이스인 캔버스에 대한 편집자의 소개입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!