최근에, 나는 입자 그리드 애니메이션이 매우 눈부신 것을 보았고, 하나를 만들었고, 그것은 배경으로 꽤 좋았습니다. CSDN은 2m 이상의 사진을 업로드 할 수 없으므로 정적 사진을 자릅니다.
이 효과를 달성하는 방법을 말하기 시작하겠습니다.
우선, 물론 캔버스를 추가하십시오.
<canvas id = canvas> </canvas>
다음 스타일 :
<canvas {위치 : 0;위의 캔버스의 Z -Index : -1의 역할은 일부 요소의 배경 아래에 배치 될 수 있다는 것입니다.
캔버스가 전체 브라우저로 채워질 수 있도록하려면 브라우저와 동일하게 캔버스의 넓은 높이를 설정해야합니다.
function getsize () {w = canvas.width = window.innerWidth;위의 W 및 H는 브라우저의 너비를 나타냅니다.
브라우저의 너비를 얻으면 다음 단계는 입자를 미리 정의해야합니다.
var opt = {Particleamount : 50, // 입자 수 : 1, // 입자 운동 속도 변형 : 1, // 입자 이동 속도의 변수 : RGB (32,245,245), // 입자의 색상. Linecolor : RGB (32,245,245), // 그리드 연결의 색상 Defaultradius : // 입자 반경 Variantradius : 2, // 입자 반경의 변수 : 200 // 입자 간의 최소 거리};위의 속도 변수와 반경 변수는 입자의 크기와 속도가 정확히 같지 않도록하는 것입니다.
그런 다음 입자를 초기화하기위한 클래스를 만듭니다.
함수 partical (this.random ()*w; .speed = 옵션 peed + opt.variantspeed*math.random (); color = particlecolor; // 입자의 색상 this.radius = 옵션. ), // x 축의 // 입자 속도 : this. this.speed * math.sin (this.directionangle) // y axis} 입자 속도} this.update = function () {// 입자 업데이트 기능 this. moment this.y += this.vector.y; // 입자의 입자는 다음 순간 y- 축의 좌표에있을 것입니다. (this.x> = w || this.x <= 0) {// 음수 숫자 this.vector.x *= -1;} if (this.y> = h || this.y <= 0) {// 상단 및 하단 테두리에 도달하면 y 축의 속도를 원래 음수로 만듭니다. 크기의 크기로 브라우저 창을 변경하는 것이고, 창 크기 후 일부 입자는 .x = w;} (this.y> h) {this.y = h;}입니다. if (this.x <0) {this.x = 0;} if (this.y <0) {this.yy = 0;} this.draw = function () {// 입자 CTX의 함수를 그립니다. beginpath (); ctx.closepath ();1. 각 입자의 초기 속도와 각도는 무작위로 생성되며 입자의 색상은 관련 설정 옵션에 의해 결정됩니다.
2. 벡터는 입자의 움직임 방향을 저장하는 데 사용됩니다. 마찬가지로, this.vector.y가 음수이면, 입자가 위쪽으로 이동하고, 양성이면 입자가 아래쪽으로 이동합니다.
UPDATE는 각 입자의 다음 위치의 좌표를 업데이트하는 데 사용됩니다. 먼저, 입자의 움직임이 캔버스의 크기를 초과하면, 방향 벡터에 리버스 이동 방향을 생성한다.
3. 윈도우 줌은 입자가 경계를 초과하여 가장자리 감지 함수를 캡처 할 수 없으므로이 상황을 감지하고 입자의 위치를 현재 캔버스 경계로 재설정하는 데 일련의 IF 문이 필요합니다.
4. 마지막 단계에서 캔버스 에이 점을 그립니다.
입자의 입자가 작성되었으며 아래로 그를 끌어들일 것입니다.
function init () {getsize ();ParticalAmount의 위의 초기화에는 입자 객체가 있으며, 이는 객체를 초기화하지만 아래로 그려지지 않습니다.
함수 루프 () {ctx.clearrect (0,0, w, h); draw ();} window.requestanimationframe (loop);}루프 () 함수가 실행될 때마다 캔버스의 내용이 제거되고 입자 좌표가 입자 객체의 업데이트 () 함수를 통해 다시 계산되고 입자가 Draw () 함수를 통해 그려집니다. 입자 물체의. 다음은 현재 효과입니다.
그러나 브라우저 창의 크기가 변경되면 일부 입자가 사라지면 브라우저 크기가 변경되는지 모니터링해야합니다.
window.addeventListener (resize, function () {winResize ()}, false);그런 다음 WinResize () 기능을 작성해야합니다 더 소비 된 성능. 여기서는 솔루션을 직접 말할 수 있습니다. 이 기간 동안 브라우저 크기가 트리거되면 실제로는 코드가 간단합니다.
var particlle = [], w, h; 높이, 기사의 상단에}, Delay)}에 대한 소개가 있습니다.
이런 식으로 모든 입자 애니메이션이 완료된 다음 입자 사이에 정의 된 OPT 객체에 라인을 그릴 수 있습니다. 그들 사이에 그것을 그릴 것입니다.
따라서 두 입자 사이의 거리를 계산하는 방법, 주니어 고등학교 수학의 첫 번째 교훈, Pyrothebroken 정리, 정사각형 및 정사각형 및 오른쪽 삼각형의 오른쪽 삼각형에 대해 생각할 수 있습니다. 세 번째 변화는 다음을 참조하십시오.
이제 각 입자의 x 축과 Y 축의 좌표를 알고 있다면 두 지점 사이의 거리를 계산하고 기능을 작성하며 다음과 같이 두 지점을 전달할 수 있습니다.
함수 getDistance (point1, point2) {return math.sqrt (math.pow (point1.x -point2.x, 2) + math.pow (point1.y -point2.y, 2));}이제 우리는 두 지점 사이의 거리를 계산할 수 있으므로 모든 입자의 색 깊이가 정확히 동일하다면 각 입자와 다른 입자 사이의 거리를 계산합니다. 조금 추악하므로 두 입자 사이의 거리에 따라 연결의 투명성을 결정할 수 있습니다. 특정 거리가 표시되지 않습니다.
function linepoint (point, hub) {for (i = 0; i <hub.length; i ++) {let 거리 = getDistance (if (if (if (불투명도> 0) {ctx.linewidth = 0.5; ctx.strokestyle = rgba (+line [0]+,+line [1]+,+line [2]+,+불투명도+); ctx.beginpath () ctx. }}}}}}}}}위에서 전송 된 두 매개 변수는 1 지점의 배열이며, 불투명도 = 1- 장관/옵션은 거리가 Opt.mindistance, 불투명도보다 더 큰 경우에 사용됩니다 부정적이며 다음 판단은 정기적 인 표현식을 사용한 다음이 코드를 추가합니다.
var line = 옵션 .linecolor.match (// d+/g);
마지막으로, 거리 계산 거리는 loop () 함수에서 연속적으로 순환됩니다.
함수 루프 () {ctx.clearrect (0,0, w, h); for (i = 0; i <particle.length; i ++) {//이 순환선 점 (입자 [i], 입자)} window.requestanimationFrame (루프);}연결 거리 (연결 거리가 너무 많은 줄을 생성 함)에 너무 많은 지점을 추가하면 애니메이션이 운반되지 않습니다. 보기 포트가 좁아지면 입자의 움직임 속도를 줄이는 것이 가장 좋습니다. 입자의 크기가 작을수록 좁은 공간의 움직임 속도가 더 빠릅니다.
전체 코드 표시 :
<html lang = en> <head> <utf-8> <title> 캔버스 <canvas {긍정적 인다 : 왼쪽; 상단 : 0; 캔버스); var ctx = canvas.getContext (2d); {ParticleAmount : 50, // defaultspeed : 1, // motor -speed variantspeed : 1, // 변수 b (32,245,245). ), // 입자의 색상 Linecolor : rgb (32,245,245), // 색상 defaultradius를 연결하는 그리드의 색상 : // 입자 반경 Variantradius : 2, // 입력 반경의 가변 적 사고 방식 : 200 / / 입자 사이의 연결된 와이어 var line = linecolor (// d+/ g); init (); () {getsize (getsize); i <particle.length; i ++) {입자 [i] .Draw ();} { LinePoint (입자 [i], 입자)} window.requestanimationFrame (loop);} function linepoint (point, hub) {for (i = 0; i <hub.length; i ++) let disbance = getDistance (point, 허브 [I]; If (불투명도> 0) {ctx.linewidth = 0.5; +line [2]+,+불투명도+); .closepath (); ctx.stroke ();}} 함수 getDistance (point1, point2) {return math.sqrt (math.pow (point1.x-pill2.x, 2) + math.pow -point2.y, 2);} function getsize () {W = Window.innerWidth; x- 축의 입자 this.y = math.random ()*h; 입자의 움직임 속도는 directionangle = math.floor (math.random ()*360); .Defaultradrad IUS+Math () * opt.variantradius; x 축의 입자 : this.speed* math (this.directionangle) // y- 축에서의 속도} this.update = function () {// 업데이트 함수 입자. 다음 순간 y += this.vector.y; // y -Axis의 좌표에서 다음 순간에 입자. (this.x> = w || this.x <= 0) {// 왼쪽과 오른쪽 경계에 도달하면 x 축의 속도를 원래 음수로 바꾸십시오. .vector.x *= -1;} if (this.y> = h || this.y <= 0) {// 상한과 하한에 도달하면 y 축의 속도가 원본 숫자 this.vector.y *= -1; // 브라우저 창을 크기와 시간으로 변경하면 일부 입자가 숨겨져 있습니다. , 그가 이것을 표시 할 수 있도록 this.x = w;} if (this.y> h) {this.y = h;} if (this.x <0) {this.x = 0;} if (this.y. <0) {this.y = 0;} this.draw = function () {{// 입자를 그리는 기능 ctx.beginpath (); 0, ctx.fillstyle = ctx.fill () </script> </body> </html>;위는이 기사의 모든 내용입니다.