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="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>