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 confirm选择判断
Oct 18 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
写一个Vue loading 插件
Nov 09 Javascript
JS class语法糖的深入剖析
Jul 07 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
谈一谈收音机的高放电路
2021/03/02 无线电
php cli 小技巧
2013/06/03 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
分享10段PHP常用代码
2015/11/11 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Python查看微信撤回消息代码
2018/06/07 Python
python中的unittest框架实例详解
2021/02/05 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
情况说明书格式范文
2014/05/06 职场文书
委托书怎样写
2014/08/30 职场文书
求职自我评价范文
2015/03/09 职场文书
酒店员工管理制度
2015/08/05 职场文书
高中班主任心得体会
2016/01/07 职场文书
《观潮》教学反思
2016/02/17 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS