javascript_javascript スキルを使ってバラバラな円を描く方法

効果

HTML コード

コードをコピーします コードは次のとおりです:

<キャンバス id="my_canvas" width="500" height="400">
お使いのブラウザはキャンバスをサポートしていません

別のサークル

JavaScript コード

コードをコピーします コードは次のとおりです:

var context=document.getElementById("my_canvas");
context=context.getContext("2d");
var サークル=[];
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();
}
}
関数 Circle(x,y,r,color){
this.x=x;
this.y=y;
this.r=r;
this.color=color;
}
関数 make_circle(){
var x=Math.floor(Math.random()*width) 1;
var y=Math.floor(Math.random()*高さ) 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)) ")";//別の色を作成します
var Circle=新しいCircle(x,y,r,color);
if(テスト1(サークル)&&テスト2(サークル)){
Circles.push(circle);
context.ストロークスタイル=カラー;
context.beginPath();
context.arc(x,y,r,0,Math.PI*2,true);
context.closePath();
context.ストローク();
count=0;
}
それ以外{
カウント ;
if(count>10000){//ループ回数が多すぎる場合は、新しいサークルを配置するスペースがないと想定できます
alert("これ以上サークルはありません");
false を返します;
}
make_circle();
}
}
function test1(circle){//新しい円が他の円と交差するかどうかをテストします
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) false を返します;
}
}
true を返します;
}
function test2(circle){//新しい円が境界線に触れているかどうかをテストします
if((circle.xcircle.r)>幅||(circle.ycircle.r)>高さ||(circle.x-circle.r) false を返します;
}
それ以外{
true を返します;
}
}

以上がこの記事の全内容です。皆さんが JavaScript を使いこなすのに役立つことを願っています。