之前就说要写的，今天补出来； 先看效果： 基本代码： 要实现
<!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"> 此处写代码 </script> </body> </html>首先需要定义一个画圆的基本样式所需要的属性；
function draw(x, y, r) { var canvas = document.getElementById("cv"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "#" + 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.fill() } }这里strokeStyle指的是圆的颜色； 这里才用随机生成的方式
ctx.fillStyle = "#" + getN(255, 0).toString(16) + getN(255, 0).toString(16) + getN(255, 0).toString(16);其中的随机数字是：
function getN(max, min) { return Math.floor(Math.random() * (max - min) + min) }为了判断生成了多少个圆，我定义了一个基本变量，以此控制何时清空画布；
var z = 0;这里还需要定义画圆的方法，
function startDrawing() { var x = getN(400, 100), y = getN(x, 10), r = getN(x / 8, y / 8); if (z > 20) { document.getElementById("cv").getContext("2d").clearRect(0, 0, 500, 500); z=0; startDrawing() } else { draw(x, y, r); draw(y, x, r); z++; } }然后就可以画圆了，这里我们通过点击按钮开始画圆
var timer=null; start.onclick = function () { clearInterval(timer); timer=setInterval(function () { startDrawing() }, 100) }最后补上完整代码
<!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.fillStyle = "#" + 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.fill() } } function getN(max, min) { return Math.floor(Math.random() * (max - min) + min) } var z = 0; function startDrawing() { var x = getN(400, 100), y = getN(x, 10), r = getN(x / 8, y / 8); if (z > 20) { document.getElementById("cv").getContext("2d").clearRect(0, 0, 500, 500); z=0; startDrawing() } else { draw(x, y, r); draw(y, x, r); z++; } } var timer=null; start.onclick = function () { clearInterval(timer); timer=setInterval(function () { startDrawing() }, 100) } </script> </body> </html>今天看了看发现因为xyr的范围问题，所以大多数都生成在右下角，所以略加改动；
function startDrawing() { this.create=function(){ var x = getN(400, 50), y = getN(400, 50), r = getN(x / getN(30,5), y / getN(30,2)); draw(x, y, r); z++; }; if (z > 88) { document.getElementById("cv").getContext("2d").clearRect(0, 0, 500, 500); z=0; } else { this.create(); this.create(); this.create(); } }这里增加了this.create属性，其实还可以用类的概念，不过下来再说吧； 对了之前说过的狂点按钮，生成速度加快的问题也得到解决了。
var timer=null; start.onclick = function () { clearInterval(timer); timer=setInterval(function () { startDrawing() }, 100) }就是点击进入时首先清定时器，然后再开启定时器； 以下是第二版的完整代码：
<!doctype html> <html> <head> <style> canvas { background: yellow } </style> <meta charset="utf-8"> </head> <body> <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.fillStyle = "#" + 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.fill() } } function getN(max, min) { return Math.floor(Math.random() * (max - min) + min) } var z = 0; function startDrawing() { this.create=function(){ var x = getN(400, 50), y = getN(400, 50), r = getN(x / getN(30,5), y / getN(30,2)); draw(x, y, r); z++; }; if (z > 88) { document.getElementById("cv").getContext("2d").clearRect(0, 0, 500, 500); z=0; } else { this.create(); this.create(); this.create(); } } var timer=null; start.onclick = function () { clearInterval(timer); timer=setInterval(function () { startDrawing() }, 100) } </script> </body> </html>