在画布上画不相交的圆

同上篇博客一样都是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 color
var 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 circle
alert("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 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;
}
}

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

html

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

 

css

 #disp{
        width: 500px;
        height: 400px;
        box-shadow: 0 0 3px rgba(255,0,0,0.4);
        position: relative;
    }
    #disp div{
        position: absolute;
    }

 

javascript

    var disp=document.getElementById("disp");
    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 r=Math.floor(Math.random()*(max_radius-min_radius))+min_radius;
        var x=Math.floor(Math.random()*width);
        var y=Math.floor(Math.random()*height);
        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+r,y+r,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 circle
                alert("no  more circle");
                return false;
            }
            make_circle();
        }
    }
    function draw_circle(circle){
        var newcircle=document.createElement("div");
            newcircle.style.border="1px solid "+circle.color;
            newcircle.style.width=2*circle.r+"px";
            newcircle.style.height=2*circle.r+"px";
            newcircle.style.borderRadius=circle.r+"px";
            newcircle.style.left=(circle.x-circle.r)+"px";
            newcircle.style.top=(circle.y-circle.r)+"px";
            disp.appendChild(newcircle);
    }
    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;
        }
    }