공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/HTML

snow Effect

serpiko 2013. 10. 14. 10:11

 

애플리케이션 - snowEffect.egg

 

 

 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
<!DOCTYPE HTML> 
 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <title>무제 문서</title> 
 
  
 <style> 
 
 
 div.main_container 
 { 
 position: absolute; 
 left:100px; 
 top:100px; 
 width:400px; 
 height:400px; 
 
 
 }  
 #can_draw_area{ 
 position:absolute; 
 left:40px; 
 top:0px;  
  
 z-index: 20; 
  
 } 
  
 #bg{ 
 position:absolute; 
 left:000px; 
 top:000px;  
 width:400px; 
 height:400px; 
 z-index: 10; 
 } 
  
 </style> 
 <script> 
 var canvas;  
 var context; 
 var image;  
  
 var snowList; 
 var nRight =320; 
 var nBottom =400; 
 var nLeftWind =6; 
 var nRightWind =6; 
  
 var nSnowSpeed =10; 
 function on_Load() 
 { 
  
 this.init(); 
 this.loadSnowImage(function(){ 
 snow(); 
 }); 
 }; 
  
 function init(){  
 this.canvas = document.getElementById("can_draw_area"); 
 this.context = canvas.getContext("2d"); 
  
  
 this.snowList = new Array(); 
 for(var i=0;i<500;i++) 
 { 
 var objSnow = {}; 
 this.resetSnow(objSnow); 
 objSnow.y = this.nBottom*Math.random(); 
 this.snowList[i]=objSnow; 
 } 
  
 } 
  
 function resetSnow(objSnow) 
 { 
 // 크기. 
 var sz = 5+(25*Math.random()); 
 objSnow.width = sz; 
 objSnow.height = sz; 
  
  
 // 위치. 
 objSnow.x = this.nRight*Math.random(); 
 objSnow.y = -20;  
 // 바람(X좌료로의 움직이는 이동폭..) 
 objSnow.nSpeedX = (this.nRightWind+(Math.random()*this.nRightWind))-(this.nLeftWind+(Math.random()*this.nLeftWind)); 
  
 // 내리는 속도.(큰 눈일수록 더 빨리 움직이도록함) 
 objSnow.nSpeedY = 2+(this.nSnowSpeed*sz*0.02); 
  
  
 } 
  
 function loadSnowImage(callBack) 
 { 
 this.image = new Image(); 
 this.image.addEventListener("load",callBack,false); 
 this.image.src = "snow.png"; 
 } 
  
 function snow() 
 { 
 setInterval(on_Draw,30); 
 } 
  
 function on_Draw() 
 { 
 context.clearRect(0,0,400,400); 
  
 var nLength = this.snowList.length; 
  
  
 for(var i=0;i<nLength;i++) 
 { 
 var objSnow = this.snowList[i]; 
 if(objSnow.x<=0 || objSnow.x>this.nRight || this._y>(this.nBottom))  
 { 
 this.resetSnow(objSnow);  
 } 
 // 눈의 위치 이동. 
 objSnow.x+=objSnow.nSpeedX; 
 objSnow.y+=objSnow.nSpeedY; 
  
 context.drawImage(image,objSnow.x, objSnow.y, objSnow.width, objSnow.height); 
 } 
  
 } 
 </script> 
 </head> 
 <body onLoad="on_Load()"> 
 <div class="main_container"> 
 <canvas id="can_draw_area" width="320" height="400"></canvas> 
 <div id="bg"> 
 <img src="bg3.png"> 
 </div> 
 </div> 
  
  
 </body> 
 </html>
저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > HTML' 카테고리의 다른 글

라디오버튼  (0) 2013.10.21
다이어그램 - GoJS (Diagram)  (0) 2013.10.14
튕기는 공  (0) 2013.10.14
HTML5 가이드 - PDF  (0) 2013.10.14
각 웹문서 인코딩 UTF-8  (0) 2013.10.13
댓글