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有所帮助。

赞 (0)

相关推荐

  • JavaScript中使用Math.PI圆周率属性的方法

    这将返回一个圆到其直径的圆周的比率,大约3.14159. 语法 Math.PI 例子: <html> <head> <title>JavaScript Math PI Property</title> </head> <body> <script type="text/javascript"> var property_value = Math.PI document.write("Prope

  • javascript实现给定半径求出圆的面积

    代码相当简单,这里就不多废话了,小伙伴们自己参考下吧. <script> var circularityArea = new Function("r","return r*r*Math.PI"); //创建一个函数对象 var rCircle = 2;//给定圆的半径 var area = circularityArea(rCircle); alert("半径为2的圆面积为:" + area); </script> 以上所

  • javascript结合Canvas 实现简易的圆形时钟

    javascript结合Canvas 实现简易的圆形时钟

    之前学习了下html5中的canvas元素,为了练练手就实现了一个简易的时钟.时钟本身并不复杂,也没有使用图片进行美化,不过麻雀虽小五脏俱全,下面就与大家分享一下: 演示效果: html代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  • 原生javascript模仿win8等待提示圆圈进度条

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简单介绍 原生javascript编写,需要理解js基于面向对象编程和圆形坐标计算! 实现原理:把每个圆点抽象成一个对象(ProgressBarWin8类型),将每个圆点对象存在数组中(progressArray),延迟执行每个圆点对象的run方法,至于圆点运行速度越来越快,是通过改变定时器延迟毫秒数

  • javascript椭圆旋转相册实现代码

    javascript椭圆旋转相册实现代码

    功能说明: 1.支持自动和手动两种模式:自动模式下自动旋转展示,手动模式下通过鼠标选择当前图片,或通过提供的接口选择上一张/下一张图片. 2.可自行添加旋转的缓动模式,默认模式为:匀速,先快后慢,先慢后快. 3.可自定义旋转轨迹的宽和高. 4.支持IE6 7 8 9 10 firefox chrome等浏览器. 效果预览: 实现原理: 根据对图片在椭圆轨迹上的运动,动态改变缩放大小,实现立体的视觉效果. 代码分析: 复制代码 代码如下: init:function(id,options){ va

  • javascript动画之圆形运动,环绕鼠标运动作小球

    代码如下: 复制代码 代码如下: <script type="text/javascript"> var ball; var mouseX = 100; var mouseY = 100; var angle = 0; var radius = 50; function run(){ if(ball === undefined){ ball = document.createElement("span"); ball.style.position = &

  • JavaScript中圆括号()和方括号[]的特殊用法疑问解答

    (1, 2, 3); // return 3; 很好奇,为什么会返回3?这是什么机制?圆括号起到了什么作用? (1, 2, 3, alert )("Amazing!"); // 这里就更好玩了,居然可以直接调用alert :经过测试,全局函数都可以通过这样调用. 下面是关于 方括号[] 的疑问: 在JS中,[]几乎就和数组画上了等号,但也有神奇的时候. [1,2,3][1]; // return 2; 当然这种方法也经常使用,常用于数组的索引 和 调用的对象的响应属性名存放在某个变量时

  • javascript圆盘抽奖程序实现原理和完整代码例子

    javascript圆盘抽奖程序实现原理和完整代码例子

    效果预览: 一.模拟抽奖的实现过程 旋转原理:当支持CSS3属性采用transform: rotate(角度deg)设置,当角度为正数时顺时针旋转,当为负数时逆时针旋转.如果是IE8及其以下,采用采用绝对定位设置top和left,模拟角度旋转. run方法,参数angle指角度 复制代码 代码如下: function run(angle) {                    if (isIE) {                        cosDeg = Math.cos(angle

  • Javascript 圆角div的实现代码

    Javascript 圆角div的实现代码

    现在实现圆角普遍用图片来控制,这种方法有其优点(产生的圆角平滑). 但同时他也要求有吻合的图片,如果要动态的改变div的样式颜色则有些力不从心.还有就是用js来实现. 实现后的调用代码 如下 复制代码 代码如下: var objDiv = getRoundDiv.call(document,"solid 1px yellow","#dddddd") objDiv.Div.style.width="100px"; objDiv.Content.st

  • javascript实现画不相交的圆

    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代码

  • JavaScript+html5 canvas制作的圆中圆效果实例

    JavaScript+html5 canvas制作的圆中圆效果实例

    本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { background:#F2F2F2; height:500px; height:500px; mar

  • 优雅的使用javascript递归画一棵结构树示例代码

    优雅的使用javascript递归画一棵结构树示例代码

    递归和尾递归 简单的说,递归就是函数自己调用自己,它做为一种算法在程序设计语言中广泛应用.其核心思想是把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解.一般来说,递归需要有边界条件.递归前进阶段和递归返回阶段.当边界条件不满足时,递归前进:当边界条件满足时,递归返回. 但是作为一个合格的程序员,我们也因该知道,递归算法相对常用的算法如普通循环等,运行效率较低.因此,应该尽量避免使用递归,除非没有更好的算法或者某种特定情况,递归更为适合的时候.在递归调用的过程当中系统为每一层的

  • python计算圆周长、面积、球体体积并画出圆

    python计算圆周长、面积、球体体积并画出圆

    输入半径,计算圆的周长.面积.球体体积,并画出这个圆.拖动条.输入框和图像控件的数据保持一致! Fedora下测试通过 复制代码 代码如下: #https://github.com/RobberPhex/GTK-Example-CalcAreafrom gi.repository import Gtk, Gdk, GdkPixbuffrom PIL import Image, ImageDrawfrom io import BytesIOfrom math import pi class Mod

  • 使用JavaScript实现网页版Pongo设计思路及源代码分享

    使用JavaScript实现网页版Pongo设计思路及源代码分享

    1.游戏背景介绍(写在前面的废话): 五月初的某天,看到某网推荐了这款游戏,Pongo,看着还不错的样子就用ipad下下来试玩了下,玩了两局感觉还错挺过瘾的,因为是手欠类游戏嘛大家懂的. 但是没一会发现游戏在ipad似乎有些bug,玩一会就会卡住然后只能强退了,真是揪心,记录还等着破呢. 怎么办?玩游戏不如玩自己的游戏的念头又邪恶的出现了,然后就把pad丢给了朋友虐心去,我默默回到电脑前开始动手自己写个不会卡的. 大概两小时吧,写出了基本框架,然后扔sinaapp里试了下效果基本能玩就洗洗睡了.

  • js实现黑白div块画空心的图形

    js实现黑白div块画空心的图形

    本文实例为大家分享了js实现黑白div块画空心图形的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>starts picture</title> <link rel="stylesheet" href="main.css"

  • javascript设计模式 – 职责链模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 职责链模式原理与用法.分享给大家供大家参考,具体如下: 介绍:很多情况下,在一个软件系统中可以处理某个请求的对象不止一个.例如一个网络请求过来,需要有对象去解析request Body,需要有对象去解析请求头,还需要有对象去对执行对应controller.请求一层层传递,让每一个对象都基于请求完成自己的任务,然后将请求传递给下一个处理程序.是不是感觉有点中间件的感觉. 定义:职责链就是避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求.将

  • javascript canvas封装动态时钟

    本文实例为大家分享了canvas封装动态时钟的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&

  • iOS开发之随机生成两圆之间的标准圆

    iOS开发之随机生成两圆之间的标准圆

    前言 相信很多社交产品中,肯定会存在寻找附近人或者附近商家的需求,类似下图,在大圆和小圆之间(橘色区域)生成一系列的随机圆,并且所有随机圆之间也不能有交集,我暂且称这种圆为标准圆. 关于这样的需要以前在做项目中有同事做过,虽然可以实现了上面的效果图,但是坐标及半径都是写死,从写死的数据随机取值,看上去是满足了,但是对于用户来说多次使用该功能时,肯定有一定的视觉疲倦,且写死的一些数据真的不好写,如果大圆或者小圆半径变化了,或者需要更多的标准圆,那怎么办呢?一脸懵逼???? 实现思路 思路一: 对于

  • Android项目实战手把手教你画圆形水波纹loadingview

    Android项目实战手把手教你画圆形水波纹loadingview

    本文实例讲解的是如何画一个满满圆形水波纹loadingview,这类效果应用场景很多,比如内存占用百分比之类的,分享给大家供大家参考,具体内容如下 效果图如下: 预备的知识: 1.贝塞尔曲线    如果你不了解,可以来这里进行基础知识储备:神奇的贝塞尔曲线 2.Paint.setXfermode()  以及PorterDuffXfermode 千万不要被这个b的名字吓到,不熟悉看到可能会认为很难记,其实 只要站在巨人的丁丁上 还是很简单的. 好了 废话不多说 ,跟我一步步来做一个炫酷的view吧

随机推荐