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 相关文章推荐
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
详解封装基础的angular4的request请求方法
Jun 05 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
js canvas实现俄罗斯方块
Oct 11 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
js确定对象类型方法
2012/03/30 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
简单介绍Python中的JSON模块
2015/04/08 Python
django批量导入xml数据
2016/10/16 Python
python样条插值的实现代码
2018/12/17 Python
Python requests模块session代码实例
2020/04/14 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2014年政工师工作总结
2014/12/18 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript