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>
