캔버스 입자 애니메이션 배경 구현 예

연결 효과 없음:

연결 효과:

이러한 효과를 얻는 것은 실제로 매우 간단하며 대략 다음 단계로 나눌 수 있습니다.

먼저, 입자 배경을 표시해야 하는 상위 요소에 canvas 태그를 만들고 width 와 height 지정해야 합니다. 임의의 점 좌표를 생성할 때 width 와 height 참조로 사용해야 합니다. width 와 height 상위 요소의 너비와 높이와 같습니다.

 // 상위 요소가 bodyconst인 경우 ele = document.body;const canvas = document.createElement('canvas');canvas.width = ele.clientWidth;canvas.height = ele.clientHeight;// ele에 캔버스 태그를 삽입합니다. .appendChild(캔버스);

x , y , rateX (X축 점의 이동 속도), rateY (Y축 점의 이동 속도)를 포함하여 width 와 height 기준으로 일정량의 점 좌표 정보를 무작위로 생성합니다. , rateX 및 rateY 점 궤적의 이동을 결정합니다.

 const points = [];// 점의 좌표를 무작위로 생성하려면 반경의 최대값을 지정해야 합니다. function getPoint(radius) { const x = Math.ceil(Math.random() * this.width), // 입자의 x 좌표 y = Math.ceil(Math.random() * this.height), // 입자의 y 좌표 r = +(Math.random() * this.radius).toFixed(4) , // 입자의 반경 rateX = +(Math.random() * 2 - 1).toFixed(4), // x 방향의 입자 이동 속도 rateY = +(Math.random() * 2 - 1) .toFixed(4) ); // y 방향의 입자 이동 속도 return { x, y, r, rateX, rateY };}// 100개 점의 좌표 정보를 무작위로 생성합니다(let i = 0; i < 100; i++) { points.push(this.getPoint());}

생성된 포인트 배열을 캔버스에 그립니다.

 function drawPoints() { points.forEach((item, i) => { ctx.beginPath(); ctx.arc(item.x, item.y, item.r, 0, Math.PI*2, false); ctx.fillStyle = '#fff'; ctx.fill(); //rateX 및 rateY에 따라 점의 좌표를 이동합니다. if(item.x > 0 && item.x < width && item.y > 0 && item.y < height) { item.x += item.rateX * rate; item.y += item.rateY * rate } else { // 입자 이동이 경계를 초과하면 이동합니다. 입자 새 점을 제거하고 다시 생성합니다. points.push(getPoint(radius));

점 배열을 순회하며 점의 좌표를 비교합니다. 두 점 사이의 거리가 특정 값보다 작으면 두 점 사이의 거리가 멀어질수록 lineWidth 변경됩니다. , 선이 가늘어집니다.

 // 두 점 사이의 거리 계산 function dis(x1, y1, x2, y2) { var disX = Math.abs(x1 - x2), disY = Math.abs(y1 - y2) return Math.sqrt(disX * disX + disY * disY);}function drawLines() { const len ​​​​= points.length; //중심 좌표를 쌍으로 판단합니다. for(let i = 0; i < len; i++) { for(let j = len - 1; j >= 0; j--) { const x1 = 포인트[i].x, y1 = 포인트[i].y, x2 = 포인트[j]. x, y2 = points[j].y, disPoint = dis(x1, y1, x2, y2); // 두 점 사이의 거리가 150보다 작으면 선을 그립니다. if(disPoint <= 150) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.StrokeStyle = '#fff'; //두 점 사이의 거리가 멀수록 선은 얇아집니다. 반대로 ctx.lineWidth = 1 - disPoint / 거리 ctx.strok() } } }

requestAnimationFrame 사용하여 루프에서 draw 메서드를 호출하고(그리기 메서드에는 점과 선 그리기가 포함됨) 동시에 draw 동안 rateX 및 rateY 에 따라 점의 위치를 ​​변경합니다.

 // draw 함수를 호출하여 애니메이션을 시작합니다. (function draw() { ctx.clearRect(0, 0, width, height); drawPoints(); // 선을 그릴 필요가 없으면 다음 행을 취소하면 됩니다. code.drawLines(); window.requestAnimationFrame(draw);}());

전체 코드는 https://github.com/PengJiyuan/particle-bg를 참조하세요.

내 Github: https://github.com/PengJiyuan

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