html5 canvas_html5 튜토리얼 스킬을 기반으로 눈이 날리는 효과를 구현한 예

이 글의 예제에서는 HTML5 캔버스를 기반으로 눈 내리는 효과를 구현하는 방법을 설명합니다. 이 예제를 실행하면 멋진 눈 내리는 효과를 볼 수 있습니다. 아래와 같이:

주요 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> 漫天飞雪 * {여백: 0; 패딩: 0;}

body { /*여기에서는 어떤 종류의 배경이라도 사용할 수 있습니다.*/ background: #6b92b9; } canvas { display: block; }

window.onload = function(){ //캔버스 초기화 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext ("2d");

//캔버스 크기 var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; 캔버스. height = H;

//눈송이 입자 var mp = 3000; //최대 입자 var 입자 = []; for(var i = 0; i { 입자.push({ x: Math.random ()*W, //x 좌표 y: Math.random()*H, //y 좌표 r: Math.random()*3 1, //radius d: Math.random()*mp //밀도 }) }

//플레이크를 그리자 function draw() { ctx.clearRect(0 , 0, W, H);

ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; /* ctx.fillStyle = "#FF0000";*/ ctx.beginPath(); for(var i = 0; i { var p = 입자[i]; ctx.moveTo(p.x, p.y); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); } ctx.fill(); update(); }

//눈송이를 이동하는 함수 //각도는 진행 중인 증분 플래그입니다. Sin 및 Cos 함수가 여기에 적용되어 플레이크의 수직 및 수평 이동을 생성합니다 var angle = 0; function update() { angle = 0.01; for(var i = 0; i { var p = 입자[i]; //X 및 Y 좌표 업데이트 //cos 함수에 1을 추가합니다. 플레이크가 위쪽으로 이동하게 만드는 음수 값을 방지합니다 //모든 입자에는 자체 밀도가 있으므로 각 플레이크마다 아래쪽 이동을 다르게 만드는 데 사용할 수 있습니다 //반경을 추가하여 더 무작위로 만듭니다. p.y = Math.cos(angle p.d) 1 p.r/2; p.x = Math.sin(angle) * 2;

// 빠져나갈 때 위에서부터 플레이크를 다시 보냅니다 //좀 더 유기적으로 만들고 플레이크가 왼쪽과 오른쪽에서도 들어가도록 합니다. if(p.x > W || p.x H) { if (i%3 > 0) //플레이크의 66.67% { 입자[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d }; } else { //플레이크가 오른쪽에서 나가는 경우 if(Math.sin(angle) > 0) { //다음부터 입력 입자[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d}; } else { //오른쪽부터 입력 입자[i] = {x: W 5, y: Math.random()*H, r: p.r, d: p.d}; } } } } }

//애니메이션 루프 setInterval(draw, 15); } 代码分析如下：

这行代码改变雪꽃半径大小：

复代码 代码如下: r: Math.random()*3 1, //반지름 이 코드 줄은 눈송이의 낙하 속도를 변경합니다.

코드 복사 코드는 다음과 같습니다. setInterval(draw, 15); 이 선은 눈송이 밀도를 변경합니다.

코드 복사 코드는 다음과 같습니다. var mp = 3000; 저는 이 기사에 설명된 내용이 모든 사람의 html5 웹 프로그래밍에 대한 특정 참조 가치를 가지고 있다고 믿습니다.