캔버스 그리기 플로팅 볼 효과의 예

최근 블록체인 정보에 관심을 갖고 여기저기 돌아다니다가 우연히 이 홈페이지의 효과를 봤습니다. 공이 가까워지면 거기에 연결된 감지선이 있을 것입니다. 마우스는 공과 함께 감지선을 만들 수도 있습니다. Look 다음은 캔버스를 사용하여 만듭니다.

원래 효과

효과를 얻다

이전에 svg에 대한 접촉이 많았고 캔버스도 매우 강력한 렌더링 효과를 얻을 수 있다는 것을 알고 있지만 시작할 기회를 준 사용 시나리오는 없었습니다. 그래서 이번에 직접 시도해 볼 계획입니다. .

게다가 제가 이것에 관심을 갖는 이유는 하나는 시각 효과를 좋아하기 때문이고, 다른 하나는 게임 엔진처럼 물리적인 세계를 시뮬레이션하는 느낌을 좋아하기 때문입니다. 이 공들이 서로 충돌한다고 상상해보세요. , 또는 서로 중력 반발력을 가지거나 중력 요소를 높이거나 이 애니메이션은 많은 상상력을 열어줄 수도 있습니다.

여기에서 github 저장소를 참조하세요.

Canvas의 그리기 지침은 SVG의 지침과 매우 유사하며 매우 간단합니다.

 ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

BeginPath는 경로를 시작하고 arc는 원을 그린 다음 색상으로 채웁니다.

 ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.Stroke();

마찬가지로, BeginPath는 경로를 시작하고, moveTo는 브러시를 시작점으로 이동하고, lineTo는 끝점까지 선을 그리고, 스트로크 스트로크를 그립니다.

캔버스를 전체 화면으로 유지하려면 창을 로드하거나 크기를 조정할 때 캔버스의 너비와 높이를 재설정하면 됩니다.

 var canvas = document.getElementById(canvas); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight;}window.onload = window.onresize = resizeCanvas;

기본 애니메이션을 시작하면 됩니다.

애니메이션을 만드는 4단계:

1. 일반적으로clearRect()를 사용하여 캔버스 내용을 지웁니다.
2. 캔버스 상태 저장
3. 컨텐츠 그리기
4. 캔버스 상태 재설정

내가 한 일은 상대적으로 간단합니다. 1과 3만 사용하여 지속적으로 캔버스를 지운 다음 다시 그리는 것입니다.

 window.onload = function () { resizeCanvas(); window.requestAnimationFrame(draw);};function cleanCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height);}function draw() { cleanCanvas (); // 물건을 그립니다. window.requestAnimationFrame(draw);}

세 가지를 사용할 수 있습니다:

1. window.setInterval() 사용자 상호 작용이 전혀 필요하지 않고 지속적으로 다시 그리기만 하면 충분합니다.
2. window.setTimeout() 키보드, 마우스 등의 사용자 조작이 애니메이션에 영향을 미치게 하려면 이것을 사용할 수 있습니다. (이해가 안 되네요. requestAnimationFrame이 더 낫지 않나요?)
3. window.requestAnimationFrame()은 다음에 다시 그리기 전에 수행할 작업, 즉 사용자 정의된 그리기 작업을 브라우저에 알려줍니다.

MDN의 이 예제는 매우 훌륭합니다. CodePen은 이동할 수 있으며 다음은 단지 스크린샷입니다.

나는 이전에 게임 엔진 개발을 본 적이 있으며 의식적으로 객체 지향 캡슐화를 만들었습니다. 여기서 사용되는 것은 매우 간단합니다.

가장 기본적인 것은 Vector가 2차원 공간의 점/벡터를 나타내고 그 구성원은 x와 y뿐이라는 것입니다.

이를 기준으로 Circle은 원을 나타내고, member center: Vector는 원의 중심을 나타내고, radius: number는 반지름을 나타내고, speed: Vector는 속도를 나타냅니다.

그런 다음 자신이 사용할 수 있도록 일부 멤버 함수를 캡슐화하십시오.

TypeScript + Webpack + Webpack-dev-server는 복잡하지 않으니 다음 내용을 참고하시면 됩니다.

1. 웹팩/시작하기
2. 웹팩/타입스크립트
3. 웹팩/개발서버
4. 웹팩 개발 서버

게다가 npm 실행 프로그램을 실행하는 데 사용되는 npx도 시도해 보았습니다. 예전에는 webpack을 전역으로 설치했는데, webpack xx를 로컬에 직접 설치하려면 ./node_modules/를 거쳐야 했습니다. .bin/webpack 로컬 webpack을 실행하려면 이제 npx webpack xxx를 사용할 수 있습니다.

devServer 구성에서 핫 업데이트를 활성화하기 위해 hot: true를 추가했습니다. 결과적으로 웹 페이지에 [HMR] Hot Module 교체가 비활성화되었습니다.

나는 그것을 호출해야 할 때 webpack-dev-server --hot --inline 명령줄 매개변수를 추가하는 것이 오래된 함정이라는 것을 알았습니다.

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.