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 相关文章推荐
分享几个超级震憾的图片特效
Jan 08 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 Javascript
详解Node.js如何处理ES6模块
May 15 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
利用php生成验证码
2017/02/23 PHP
php 猴子摘桃的算法
2017/06/20 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
AngularJS语法详解
2015/01/23 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python中的字符串替换操作示例
2016/06/27 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
优秀小学生家长评语
2014/01/30 职场文书
大学老师推荐信
2014/02/25 职场文书
房产委托公证书样本
2014/04/04 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
小学教师党员承诺书
2015/04/27 职场文书
合同范本之电脑出租
2019/08/13 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
MyBatis 动态SQL全面详解
2021/10/05 MySQL
php去除数组中为0的元素的实例分析
2021/11/17 PHP