javascript实现画不相交的圆


Posted in Javascript onApril 07, 2015

效果

javascript实现画不相交的圆

html代码

<canvas  id="my_canvas" width="500" height="400">

        your browser does not support canvas

    </canvas>

    <button id="my_btn">Another Circle</button>

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<len;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;

}

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)<0||(circle.y-circle.r)<0){

return false;

}

else{

return true;

}

}

以上所述就是本文的全部内容了,希望能够对大家熟练掌握javascript有所帮助。

Javascript 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
javascript操作referer详细解析
Mar 10 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 #Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 #Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 #Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 #Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 #Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 #Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
php图片添加水印例子
2016/07/20 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
图解javascript作用域链
2019/05/27 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
Python 常用string函数详解
2016/05/30 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
如何用python整理附件
2018/05/13 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
个人三严三实对照检查材料
2014/09/25 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers
OpenFeign实现远程调用
2022/08/14 Java/Android