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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
基于Pandas读取csv文件Error的总结
2018/06/15 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Python中的整除和取模实例
2020/06/03 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
银行会计业务的个人自我评价
2013/11/02 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
法制宣传实施方案
2014/03/13 职场文书
珠宝店促销方案
2014/03/21 职场文书
求职自荐信的格式
2014/04/07 职场文书
合作协议书范本
2014/04/17 职场文书
室内趣味活动方案
2014/08/24 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
安全生产先进个人总结
2015/02/15 职场文书