Draw a circle that you don't want to make on the canvas

The same blog is the same as the Alibaba pen questions, forget whether there is no requirement must use canvas, intends to write a use of CSS.

Effect

HTML code

< Canvas   ID = "My_canvas" width = "$" Height = "The " >     Your browser doesnot support canvas</canvas>    <  ID= "my_btn">another Circle</button  >

JavaScript code

varContext=document.getelementbyid ("My_canvas"); Context=context.getcontext ("2d"); varcircles=[]; varcolors=["Red", "green", "Blue", "pink"]; varwidth=500; varheight=400; varMax_radius=30; varMin_radius=20; varCount=0; Window.onload=function(){        varBtn=document.getelementbyid ("My_btn"); Btn.onclick=function(){            varTime=NewDate (); Start=Time.gettime ();        Make_circle (); }    }    functionCircle (x,y,r) { This. x=x;  This. y=y;  This. r=R; }    functionmake_circle () {varX=math.floor (Math.random () *width) +1; varY=math.floor (Math.random () *height) +1; varR=math.floor (Math.random () * (Max_radius-min_radius)) +Min_radius; varcircle=NewCircle (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 are no space for new CircleAlert ("No More Circles"); return false;        } make_circle (); }    }    functionTest1 (circle) {//test if the new circle intersects with the others        varlen=circles.length;  for(vari=0;i<len;i++){            varx1=circles[i].x; vary1=circles[i].y; varr1=CIRCLES[I].R; varX2=circle.x; varY2=circle.y; varR2=CIRCLE.R; if((X1-X2) * (X1-X2) + (y1-y2) * (Y1-y2) < (R2+R1) * (r2+R1)) {                return false; }        }        return true; }    functionTest2 (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; }    }

Draw a circle that you don't want to make on the canvas