HTML5에서 캔버스를 사용하여 입자 모션 그리기에 대한 튜토리얼 공식과 결합

이 기사는 주로 HTML5에서 캔버스를 사용하여 공식으로 입자 운동을 그리는 자습서를 소개하며 공식으로 JavaScript 코드가 필요합니다. 필요한 친구는 그것을 참조 할 수 있습니다

최근에 나는 웹 페이지를 만들고 컬렉션을 만들기 위해 HTML5를 배우는 과정에서 내가 한 데모 중 일부를 넣고 싶습니다. 그러나 웹 페이지를 만들고 모든 데모를 하나씩 배열하면 너무 못 생겼습니다. 방금 캔버스를 배웠기 때문에 브라우저를 엉망으로 만들고 작은 오프닝 애니메이션을 만들어 봅시다.

나는 오프닝 애니메이션의 영향에 대해 잠시 동안 생각했고 입자가 더 재미 있다고 생각했기 때문에 입자를 사용하기로 결정했습니다. 나는 아직도 입자와 같은 텍스트 이미지와 같은 첫 번째 기술 블로그 게시물을 기억합니다. 입자와 같은 텍스트 이미지, 그리고 선형 움직임 만 수행했으며 작은 3D 효과를 추가했습니다. 운동 공식은 간단합니다. 그래서 나는이 오프닝 애니메이션을 더 역동적으로 만들고 싶습니다.

먼저 데모로 이동 : http://2.axescanvas.sinaapp.com/demohome/index.html로 이동하십시오

효과가 직선 운동보다 더 역동적입니까? 그리고 그것은 실제로 매우 간단합니다. 이 블로그 게시물의 제목, 작은 공식 및 큰 재미를 잊지 마십시오. 그러한 효과를 달성하기 위해 우리는 중학교 만 사용합니다. . 또는 고등학교의 물리 지식, 운동 가속화 및 감속 운동을위한 공식. 그래서 그것은 실제로 작은 공식입니다. 포스터는 멋진 것들을 엉망으로 만드는 것을 좋아합니다. 직장에서 유용하지는 않지만이 재미는 정말 매력적입니다. 또한이를 수행하면 프로그래밍 사고 능력을 향상시킬 수 있습니다.

더 이상 고민하지 않고, 나는 주제에 갈 것입니다. 원리를 간단히 설명하십시오 ~~~

입자 운동의 핵심 코드는 다음과 같습니다.