javascript实现画不相交的圆_javascript技巧
程序员文章站
2022-04-25 12:46:36
...
效果
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);
context.strokeStyle=color;
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 is no space for new circle
alert("no more circle");
return false;
}
make_circle();
}
}
function test1(circle){//test if the new circle intersects with the others
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) 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) return false;
}
else{
return true;
}
}
html代码
复制代码 代码如下:
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);
context.strokeStyle=color;
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 is no space for new circle
alert("no more circle");
return false;
}
make_circle();
}
}
function test1(circle){//test if the new circle intersects with the others
var len=circles.length;
for(var i=0;i
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) 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) return false;
}
else{
return true;
}
}
以上所述就是本文的全部内容了,希望能够对大家熟练掌握javascript有所帮助。
推荐阅读
-
JavaScript面试技巧之数组的一些不low操作
-
动态的改变IFrame的高度实现IFrame自动伸展适应高度_javascript技巧
-
javascript中的缓动效果实现程序_javascript技巧
-
google地图的路线实现代码_javascript技巧
-
基于jquery的高性能td和input切换并可修改内容实现代码_javascript技巧
-
javascript 利用Image对象实现的埋点(某处的点击数)统计_javascript技巧
-
JS实现简单的顶部定时关闭层效果_javascript技巧
-
jQuery实现可收缩展开的级联菜单实例代码_javascript技巧
-
不用ajax实现点击文字即可编辑的方法_javascript技巧
-
javascript 实现简单的table排序及table操作练习_javascript技巧