javascript實現(xiàn)畫不相交的圓

更新時間：2015年04月07日 10:08:10 投稿：hebedich

這篇文章主要介紹了javascript實現(xiàn)畫不相交的圓，這個也是阿里巴巴的筆試題，只不過忘記當(dāng)時是不是要求必須用canvas來實現(xiàn)，下篇文章再寫吧。

效果

html代碼

復(fù)制代碼代碼如下:

<canvas  id="my_canvas" width="500" height="400">

        your browser does not support canvas

    </canvas>

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

javascript代碼

復(fù)制代碼代碼如下:

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 color

var circle=new Circle(x,y,r,color);

if(test1(circle)&&test2(circle)){

circles.push(circle);

context.strokeStyle=color;

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("no more circle");

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;

}

}