在画布上画不想交的圆

同上篇博客一样都是alibaba笔试题，忘了有没有要求一定要用canvas，打算再写一个利用css的。。

html代码

<canvas id="my_canvas" width="500" height="400">    your browser does not support canvas  </canvas>  <button id="my_btn">Another Circle</button>

javascript代码

var context=document.getElementById("my_canvas");    context=context.getContext("2d");  var circles=[];  var colors=["red","green","blue","pink"];  var width=500;  var height=400;  var max_radius=30;  var min_radius=20;  var count=0;  window.onload=function(){    var btn=document.getElementById("my_btn");    btn.onclick=function(){      var time=new Date();       start=time.getTime();      make_circle();    }  }  function Circle(x,y,r){    this.x=x;    this.y=y;    this.r=r;  }  function make_circle(){    var x=Math.floor(Math.random()*width)+1;    var y=Math.floor(Math.random()*height)+1;    var r=Math.floor(Math.random()*(max_radius-min_radius))+min_radius;    var circle=new Circle(x,y,r);    if(test1(circle)&&test2(circle)){    circles.push(circle);    context.strokeStyle="red";    context.beginPath();    context.arc(x,y,r,0,Math.PI*2,true);    context.closePath();    context.stroke();    count=0;    }    else{      count++;      if(count>10000){//if it loops too many times,we can assume that there is no space for new circle        alert("not any more circles");        return false;      }      make_circle();    }  }  function test1(circle){//test if the new circle intersects with the others    var len=circles.length;    for(var i=0;i<len;i++){      var x1=circles[i].x;      var y1=circles[i].y;      var r1=circles[i].r;      var x2=circle.x;      var y2=circle.y;      var r2=circle.r;      if((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)<(r2+r1)*(r2+r1)){        return false;      }    }    return true;  }  function test2(circle){//test if the new circle touchs the border     if((circle.x+circle.r)>width||(circle.y+circle.r)>height||(circle.x-circle.r)<0||(circle.y-circle.r)<0){      return false;    }    else{      return true;    }  }

原标题：在画布上画不想交的圆

关键词：