이 글의 예제에서는 HTML5 캔버스를 기반으로 눈 내리는 효과를 구현하는 방법을 설명합니다. 이 예제를 실행하면 멋진 눈 내리는 효과를 볼 수 있습니다. 아래와 같이: 주요 코드는 다음과 같습니다. 코드 복사코드는 다음과 같습니다. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">漫天飞雪 <br>* {여백: 0; 패딩: 0;}</p> <p>body {<br> /*여기에서는 어떤 종류의 배경이라도 사용할 수 있습니다.*/<br> background: #6b92b9;<br>}<br>canvas {<br> display: block;<br>} <br> < /캔버스> <br>window.onload = function(){<br> //캔버스 초기화<br> var canvas = document.getElementById("canvas");<br> var ctx = canvas.getContext ("2d");<br> <br> //캔버스 크기<br> var W = window.innerWidth;<br> var H = window.innerHeight;<br> canvas.width = W;<br> 캔버스. height = H;<br> <br> //눈송이 입자<br> var mp = 3000; //최대 입자<br> var 입자 = [];<br> for(var i = 0; i < mp; i )<br /> {<br /> 입자.push({<br /> x: Math.random ()*W, //x 좌표<br /> y: Math.random()*H, //y 좌표<br /> r: Math.random()*3 1, //radius<br /> d: Math.random()*mp //밀도<br /> })<br /> }<br /> <br /> //플레이크를 그리자<br /> function draw()<br /> {<br /> ctx.clearRect(0 , 0, W, H);<br /> <br /> ctx.fillStyle = "rgba(255, 255, 255, 0.8)";<br /> /* ctx.fillStyle = "#FF0000";*/<br /> ctx.beginPath();<br /> for(var i = 0; i < mp; i )<br /> {<br /> var p = 입자[i];<br /> ctx.moveTo(p.x, p.y); <br /> ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);<br /> }<br /> ctx.fill();<br /> update();<br /> }<br /> <br /> //눈송이를 이동하는 함수<br /> //각도는 진행 중인 증분 플래그입니다. Sin 및 Cos 함수가 여기에 적용되어 플레이크의 수직 및 수평 이동을 생성합니다<br /> var angle = 0;<br /> function update()<br /> {<br /> angle = 0.01;<br /> for(var i = 0; i < mp; i )<br /> {<br /> var p = 입자[i];<br /> //X 및 Y 좌표 업데이트<br /> //cos 함수에 1을 추가합니다. 플레이크가 위쪽으로 이동하게 만드는 음수 값을 방지합니다<br /> //모든 입자에는 자체 밀도가 있으므로 각 플레이크마다 아래쪽 이동을 다르게 만드는 데 사용할 수 있습니다<br /> //반경을 추가하여 더 무작위로 만듭니다.<br /> p.y = Math.cos(angle p.d) 1 p.r/2;<br /> p.x = Math.sin(angle) * 2;<br /> <br /> // 빠져나갈 때 위에서부터 플레이크를 다시 보냅니다<br /> //좀 더 유기적으로 만들고 플레이크가 왼쪽과 오른쪽에서도 들어가도록 합니다.<br /> if(p.x > W || p.x < 0 || p.y > H)<br> {<br> if (i%3 > 0) //플레이크의 66.67%<br> {<br> 입자[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d };<br> }<br> else<br> {<br> //플레이크가 오른쪽에서 나가는 경우<br> if(Math.sin(angle) > 0)<br> {<br> //다음부터 입력<br> 입자[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};<br> } <br> else<br> {<br> //오른쪽부터 입력<br> 입자[i] = {x: W 5, y: Math.random()*H, r: p.r, d: p.d}; <br> }<br> }<br> }<br> }<br> }<br> <br> //애니메이션 루프<br> setInterval(draw, 15);<br>}<br></ 스크립트><br></body><br></html></div> <p>代码分析如下：</p> <p>这行代码改变雪꽃半径大小：</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode69'));"><u>复代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode69">r: Math.random()*3 1, //반지름</div> <p>이 코드 줄은 눈송이의 낙하 속도를 변경합니다. </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode70'));"><u>코드 복사</u></span></div>코드는 다음과 같습니다.</div> <div class="msgborder" id="phpcode70">setInterval(draw, 15);</div> <p>이 선은 눈송이 밀도를 변경합니다. </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode71'));"><u>코드 복사</u></span></div>코드는 다음과 같습니다.</div> <div class="msgborder" id="phpcode71">var mp = 3000; </div> <p>저는 이 기사에 설명된 내용이 모든 사람의 html5 웹 프로그래밍에 대한 특정 참조 가치를 가지고 있다고 믿습니다. </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
