在页面上画几个圆,判断他们是否相交

在页面上画几个圆,判断他们是否相交

  1. 以点击鼠标为圆心,之后拖动鼠标为半径。
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 判断几个圆相交不相交 </title>
</head>
<body>
<canvas id="canvasId" width="700" height="700" style="background-color: #eee;" onselectstart="return false;"></canvas>
<span id="text" style="float: right; margin-right: 50px">给你家画几个圆吧</span>


<script type="text/javascript">
	var canvas = document.getElementById("canvasId");		
	var ctx = canvas.getContext("2d");						
	var flag = false , isMove=false, isUp=false;						
	var tc = document.createElement("canvas");				
	tc.width = canvas.width;						
	tc.height = canvas.height;		
	var tctx = tc.getContext("2d");
	var x = 0;			
	var y = 0;			
	var gx=0;
	var gy=0;
	var point=new Array();			//用于存放两次鼠标位置,既圆心的位置
	var cr=new Array();				//用于存放两个圆的半径
	var count=0;

	//原先画布鼠标按下时
	canvas.onmousedown = function (e) {
		e = e || window.event; 		//window事件	
		x = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);	//获取窗口X坐标加上水平滚动条的位置
		y = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);   //获取窗口Y坐标加上垂直滚动条的位置
		//每次只画两个圆,然后清空所有画布内容
		flag = true;	//鼠标确认按下
		tctx.drawImage(canvas,0,0,canvas.width,canvas.height);		//开始画图片,图片就是原先画布的内容
	}

	//鼠标移动时
	canvas.onmousemove = function (e) {
		if (!flag) return;		//判断鼠标是否按下了,没按下则不操作任何事情
		e = e || window.event;
		gx = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
		gy = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);
		var r=Math.sqrt((x-gx)*(x-gx)+(y-gy)*(y-gy));		//计算圆的半径
		ctx.clearRect(0,0,canvas.width,canvas.height);
		ctx.drawImage(tc,0,0,canvas.width,canvas.height);
		ctx.beginPath();
		ctx.arc(x,y, r, 0, 2 * Math.PI );
		drawDashedLine(ctx,x,y,gx,gy,2);
		ctx.stroke();
		cr[count]=r;
		point[count]=[x,y];
		isMove=true;
	}

	//鼠标松开
	canvas.onmouseup=function(e){
		var str="";
		flag=false;
		if(isMove){
			ctx.beginPath();
			ctx.font = "18px 黑体";
			ctx.fillStyle = "Red"
			ctx.fillText(count,gx,gy,200);
			ctx.stroke();
			isMove=false;
			for(var i=0;i<=count;i++){
				var str2="";
				var islove=false;
				for(var j=count;j>=0;j--){
					if(i==j) continue;
					var c=Math.sqrt((point[j][0]-point[i][0])*(point[j][0]-point[i][0])+(point[j][1]-point[i][1])*(point[j][1]-point[i][1]));
					if(is_In_love(c,cr[i],cr[j])){ 
						str2=str2+j+",";
						islove=true;
					}
				}
				if(islove) str=str+"<p>第"+i+"个与"+str2+"相交";
				document.getElementById("text").innerHTML=str;
			}
				count++;
		}
	}

	//画虚线
	function drawDashedLine(context, x1, y1, x2, y2, dashLength) {//传入参数:上下文,起点,终点,虚线间隔
		dashLength = dashLength === undefined ? 5 : dashLength;//运用三元表达式实现默认参数
		var deltaX = x2 - x1;//水平长度
		var deltaY = y2 - y1;//垂直长度
		var numDashes = Math.floor(
		Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);//虚线数量
		for (var i=0; i < numDashes; ++i) {
		context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ]
		(x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);
		}
		context.lineWidth = 1;
	context.stroke();
	}

	//判断两个圆是否相交
	function is_In_love(c,r1,r2){
		if(c>r1+r2) return false;
		else if((Math.abs(r1-r2)<=c)&&(c<=r1+r2)) return true;
		else return false;
	}
</script>

</body>
</html>

效果如下图:
在这里插入图片描述

原文链接:加载失败,请重新获取