HTML - 动画Demo

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title></title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10         }
 11 
 12         html, body {
 13             width: 100%;
 14             height: 100%;
 15             overflow: hidden;
 16         }
 17     </style>
 18 </head>
 19 <body>
 20     <canvas id="canvas" style="width:100%;height:100%"></canvas>
 21     <!--<script>
 22         // 先拿到canvas 的 Dom对象
 23         var canvas = document.getElementById('canvas');
 24         canvas.width = canvas.clientWidth;
 25         canvas.height = canvas.clientHeight;
 26         // 拿到绘图上下文对象
 27         var context = canvas.getContext('2d');
 28         //// 通过上下文中的API进行绘制操作
 29         //context.moveTo(50, 100); // 设置画笔的状态
 30         //context.lineTo(100, 100);
 31         ////context.strokeStyle = 'red'; // 只是设置状态
 32         ////context.stroke();
 33         //context.lineTo(100, 50);
 34         //context.lineTo(50, 50);
 35         //context.lineTo(50, 100);
 36         //context.strokeStyle = 'yellow';
 37         //// 着手去画
 38         //context.stroke();
 39 
 40         //context.moveTo(150, 100);
 41         //context.lineTo(150, 150);
 42         //context.stroke();
 43 
 44         ////第三步:指定绘制线样式、颜色
 45         //context.strokeStyle = "red";
 46         ////第四步:绘制矩形
 47         //context.strokeRect(10, 10, 100, 100);
 48 
 49         ////以下演示填充矩形
 50         //context.strokeStyle = "red";
 51         //context.fillStyle = "blue";
 52         //context.fillRect(110, 110, 100, 100);
 53 
 54         //context.moveTo(50, 100); // 设置画笔的状态
 55         //context.lineTo(100, 100);
 56         ////context.strokeStyle = 'red'; // 只是设置状态
 57         ////context.stroke();
 58         //context.lineTo(100, 50);
 59         //context.lineTo(50, 50);
 60         ////context.lineTo(50, 100);
 61         //context.lineWidth = 5;
 62         //context.strokeStyle = 'yellow';
 63         //context.fillStyle = "blue";
 64         //context.stroke();
 65         //context.fill();
 66         //console.log(2 * Math.PI);
 67         context.arc(150, 150, 100, 0, 2 * Math.PI, true);
 68         context.stroke();
 69     </script>-->
 70     <script>
 71         var frameRate = 30;
 72         var increment = 0.5;
 73         var max = 5;
 74         var min = 1;
 75 
 76         // 先拿到canvas 的 Dom对象
 77         var canvas = document.getElementById('canvas');
 78         canvas.width = canvas.clientWidth;
 79         canvas.height = canvas.clientHeight;
 80         canvas.style.backgroundColor = '#444349';
 81         // 拿到绘图上下文对象
 82         var context = canvas.getContext('2d');
 83 
 84 
 85         var dots = [];
 86         for (var i = getRangeRandom(200, 300) ; i >= 0 ; i--) {
 87             var color;
 88             switch (i % 5) {
 89                 case 0:
 90                     color = "#C2F012";
 91                     break;
 92                 case 1:
 93                     color = "#87F2D4";
 94                     break;
 95                 case 2:
 96                     color = "#C1E6E2";
 97                     break;
 98                 case 3:
 99                     color = "#C2CDCF";
100                     break;
101                 case 4:
102                     color = "#679EB8";
103                     break;
104             }
105             var r = getRangeRandom(min, max);
106             var dot = {
107                 position: { x: getRangeRandom(0, canvas.width), y: getRangeRandom(0, canvas.height) },
108                 velocity: { x: 0, y: 0 },
109                 style: color,
110                 radius: r,
111                 increase: r < max / 2
112             }
113             dots.push(dot);
114         }
115 
116         function update() {
117             each(function (i, item) {
118                 // 闪烁
119                 if (item.increase) {
120                     item.radius += increment;
121                     if (item.radius > max) {
122                         item.increase = false;
123                     }
124                 } else {
125                     item.radius -= increment;
126                     if (item.radius < min) {
127                         item.increase = true;
128                     }
129                 }
130                 // 移动
131                 //item.position.x += dots[i].velocity.x;
132                 //item.position.y += dots[i].velocity.y;
133                 //item.velocity.y += 1;
134                 //if (item.position.y >= canvas.height - item.radius) {
135                 //    item.position.y = canvas.height - item.radius;
136                 //    item.velocity.y = -item.velocity.y * 0.5;
137                 //} else if (item.position.y <= item.radius) {
138                 //    item.position.y = item.radius;
139                 //    item.velocity.y = -item.velocity.y*0.5;
140                 //}
141                 //if (item.position.x >= canvas.width - item.radius) {
142                 //    item.position.x = canvas.width - item.radius;
143                 //    item.velocity.x = -item.velocity.x * 0.5;
144                 //} else if (item.position.x <= item.radius) {
145                 //    item.position.x = item.radius;
146                 //    item.velocity.x = -item.velocity.x * 0.5;
147                 //}
148             });
149         }
150 
151         function render() {
152             context.clearRect(0, 0, canvas.width, canvas.height);
153             each(function (i, item) {
154                 context.fillStyle = item.style;
155                 context.beginPath();
156                 context.arc(item.position.x, item.position.y, item.radius, 0, 2 * Math.PI);
157                 context.closePath();
158                 context.fill();
159             });
160         }
161 
162         function each(func) {
163             for (var i = 0; i < dots.length; i++) {
164                 func(i, dots[i]);
165             }
166         }
167 
168         setInterval(function () {
169             update();
170             render();
171         }, 1000 / frameRate);
172 
173 
174         //// 先拿到canvas 的 Dom对象
175         //var canvas = document.getElementById('canvas');
176         //canvas.width = canvas.clientWidth;
177         //canvas.height = canvas.clientHeight;
178         //canvas.style.backgroundColor = '#444349';
179         //// 拿到绘图上下文对象
180         //var context = canvas.getContext('2d');
181         //for (var i = getRangeRandom(200, 500) ; i >= 0 ; i--) {
182         //    var r = parseInt(Math.random() * (10 - 1) + 1);
183         //    switch (i % 5) {
184         //        case 0:
185         //            context.fillStyle = "#C2F012";
186         //            break;
187         //        case 1:
188         //            context.fillStyle = "#87F2D4";
189         //            break;
190         //        case 2:
191         //            context.fillStyle = "#C1E6E2";
192         //            break;
193         //        case 3:
194         //            context.fillStyle = "#C2CDCF";
195         //            break;
196         //        case 4:
197         //            context.fillStyle = "#679EB8";
198         //            break;
199         //    }
200         //    context.beginPath();
201         //    context.arc(getRangeRandom(0, canvas.width), getRangeRandom(0, canvas.height), r, 0, 2 * Math.PI);
202         //    context.closePath();
203         //    context.fill();
204         //}
205 
206 
207         function getRangeRandom(min, max) {
208             return parseInt(Math.random() * (max - min) + min);
209         }
210     </script>
211 </body>
212 </html>

 

posted @ 2015-01-30 10:55  Alben_1  阅读(358)  评论(0编辑  收藏  举报