javascript_javascript 기술로 분리된 원을 그리는 방법

효과

HTML 코드

코드 복사 코드는 다음과 같습니다.

브라우저가 캔버스를 지원하지 않습니다

다른 서클

자바스크립트 코드

코드 복사 코드는 다음과 같습니다.

var context=document.getElementById("my_canvas");
context=context.getContext("2d");
var 원=[];
var 너비=500;
var 높이=400;
var max_radius=30;
var min_radius=20;
var 개수=0;
window.onload=function(){
var btn=document.getElementById("my_btn");
btn.onclick=function(){
var time=new Date();
시작=time.getTime();
make_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()*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)) ")";//다른 색상 만들기
var Circle=new Circle(x,y,r,color);
if(test1(원)&&test2(원)){
원.푸시(원);
context.StrokeStyle=color;
context.beginPath();
context.arc(x,y,r,0,Math.PI*2,true);
context.closePath();
context.Stroke();
개수=0;
}
그렇지 않으면{
카운트 ;
if(count>10000){//너무 많이 반복되면 새 원을 위한 공간이 없다고 가정할 수 있습니다
Alert("더 이상 원이 없습니다.");
false를 반환합니다.
}
make_circle();
}
}
test1(원) 함수{//새 원이 다른 원과 교차하는지 테스트
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)){
false를 반환합니다.
}
}
true를 반환합니다.
}
test2(원) 함수{//새 원이 테두리에 닿는지 테스트합니다
if((circle.x Circle.r)>너비||(circle.y Circle.r)>높이||(circle.x-circle.r)<0||(circle.y-circle.r )<0){
false를 반환합니다.
}
그렇지 않으면{
true를 반환합니다.
}
}

이상은 이 글의 전체 내용입니다. 모든 분들이 자바스크립트를 능숙하게 익히는 데 도움이 되었으면 좋겠습니다.