用canvas简单写几个同心圆吧； 代码如下：
<!doctype html> <html> <head> <style> canvas { background: yellow } </style> <meta charset="utf-8"> </head> <body onload="draw()"> <canvas id="cv" width="500" height="500"> </canvas> <button id="start">开始</button> <script type="text/javascript"> function draw(x, y, r) { var canvas = document.getElementById("cv"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.strokeStyle = "#" + getN(255, 0).toString(16) + getN(255, 0).toString(16) + getN(255, 0).toString(16); ctx.strokeWidth=2; ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI, false); ctx.stroke() } } function getN(max, min) { return Math.floor(Math.random() * (max - min) + min) } function startDrawing() { var i = 10, dir = 0.1; var timer = setInterval(function () { if (i > 150) { timer = null; } else { i += 5; dir =1; draw(250, 250, i * dir); } }, 100); } start.onclick=function(){ setInterval(function(){ startDrawing() },2000) } </script> </body> </html>效果如下： 如果把定时器时间更改 改成100ms: 改成10ms
