在画布上画不相交的圆

同上篇博客一样都是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 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,color){this.x=x;this.y=y;this.r=r;this.color=color;}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 color="rgb("+(Math.floor(Math.random()*256))+","+(Math.floor(Math.random()*256))+","+(Math.floor(Math.random()*256))+")";//make different colorvar circle=new Circle(x,y,r,color);if(test1(circle)&&test2(circle)){circles.push(circle);draw_circle(circle);count=0;}else{count++;if(count>10000){//if it loops too many times,we can assume that there is no space for new circlealert("no more circle");return false;}make_circle();}}

function draw_circle(circle){

context.strokeStyle=circle.color;context.beginPath();context.arc(circle.x,circle.y,circle.r,0,Math.PI*2,true);context.closePath();context.stroke();

}function test1(circle){//test if the new circle intersects with the othersvar 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;}}

想到一个利用css和js写的，和上面的方式基本一样，知识修改了画圆的方式。

html

<div id="disp">            </div>    <button id="my_btn">Another Circle</button>

css

1  #disp{2         width: 500px;3         height: 400px;4         box-shadow: 0 0 3px rgba(255,0,0,0.4);5         position: relative;6     }7     #disp div{8         position: absolute;9     }

Javascript

 1     var disp=document.getElementById("disp"); 2     var circles=[]; 3     var width=500; 4     var height=400; 5     var max_radius=30; 6     var min_radius=20; 7     var count=0; 8     window.onload=function(){ 9         var btn=document.getElementById("my_btn");10         btn.onclick=function(){11             var time=new Date();12              start=time.getTime();13             make_circle();14         }15     }16     function Circle(x,y,r,color){17         this.x=x;18         this.y=y;19         this.r=r;20         this.color=color;21     }22     function make_circle(){23         var r=Math.floor(Math.random()*(max_radius-min_radius))+min_radius;24         var x=Math.floor(Math.random()*width);25         var y=Math.floor(Math.random()*height);26         var color="rgb("+(Math.floor(Math.random()*256))+","+(Math.floor(Math.random()*256))+","+(Math.floor(Math.random()*256))+")";//make different color27         var circle=new Circle(x+r,y+r,r,color);28         if(test1(circle)&&test2(circle)){29         circles.push(circle);30         draw_circle(circle);31         count=0;32         }33         else{34             count++;35             if(count>10000){//if it loops too many times,we can assume that there is no space for new circle36                 alert("no  more circle");37                 return false;38             }39             make_circle();40         }41     }42     function draw_circle(circle){43         var newcircle=document.createElement("div");44             newcircle.style.border="1px solid "+circle.color;45             newcircle.style.width=2*circle.r+"px";46             newcircle.style.height=2*circle.r+"px";47             newcircle.style.borderRadius=circle.r+"px";48             newcircle.style.left=(circle.x-circle.r)+"px";49             newcircle.style.top=(circle.y-circle.r)+"px";50             disp.appendChild(newcircle);51     }52     function test1(circle){//test if the new circle intersects with the others53         var len=circles.length;54         for(var i=0;i<len;i++){55             var x1=circles[i].x;56             var y1=circles[i].y;57             var r1=circles[i].r;58             var x2=circle.x;59             var y2=circle.y;60             var r2=circle.r;61             if((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)<(r2+r1)*(r2+r1)){62                 return false;63             }64         }65         return true;66     }67     function test2(circle){//test if the new circle touchs the border 68         if((circle.x+circle.r)>width||(circle.y+circle.r)>height||(circle.x-circle.r)<0||(circle.y-circle.r)<0){69             return false;70         }71         else{72             return true;73         }74     }