So zeichnen Sie disjunkte Kreise mit Javascript_Javascript-Kenntnissen

Wirkung

HTML-Code

Code kopieren Der Code lautet wie folgt:

Ihr Browser unterstützt kein Canvas

Ein weiterer Kreis

Javascript-Code

Code kopieren Der Code lautet wie folgt:

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();
}
}
Funktion Circle(x,y,r,color){
this.x=x;
this.y=y;
this.r=r;
this.color=color;
}
Funktion 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)) ")";//andere Farbe erstellen
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;
}
sonst{
zählen ;
if(count>10000){//Wenn die Schleife zu oft wiederholt wird, können wir davon ausgehen, dass kein Platz für einen neuen Kreis vorhanden ist
alarm("kein Kreis mehr");
return false;
}
make_circle();
}
}
Funktion test1(circle){//testen, ob sich der neue Kreis mit den anderen schneidet
var len=circles.length;
for(var i=0;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;
}
Funktion test2(circle){//testen, ob der neue Kreis den Rand berührt
if((Kreis.x Kreis.r)>Breite||(Kreis.y Kreis.r)>Höhe||(Kreis.x-Kreis.r)<0||(Kreis.y-Kreis.r )<0){
return false;
}
sonst{
return true;
}
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist, die sich mit Javascript auskennen.