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

最新推荐文章于 2024-03-20 09:54:51 发布
最新推荐文章于 2024-03-20 09:54:51 发布
阅读量1.1k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingxin_123/article/details/82766797
版权

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

  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>

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

仗剑弑天下
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
canvas 两个圆相交重叠区域颜色填充_「译」Canvas中的环绕规则 -Winding rules in Canvas...
weixin_39625305的博客
12-29 499
前言已经确定了未来一段时间会在Canvas相关领域深耕了，最近刚开始读fabric.js的源码并完成了3w行左右代码的首轮阅读，后续会深入了解背后的原理。在源码的阅读过程中遇到了不少问题，也解决了不少问题，对Canvas绘图的理解也在慢慢加深。后面会有更多关于Canvas绘图的相关文章，可能有译文，也可能有原创，希望大家喜欢。欢迎大家关注我，并希望我的分享能给同处前端的你带来一点点收获1、什么是缠...
canvas 两个圆相交重叠区域颜色填充_前端之canvas详解（二）——圆和矩形的画法...
weixin_27210125的博客
12-20 1975
一、用canvas画圆弧用canvas画圆弧画圆弧有两种方法：1、arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。startAngle,endAn...
使用canvas剪切掉两图相交部分
最新发布
weixin_39481659的博客
03-20 234
使用canvas剪切掉两图相交部分。
canvas绘制直线时如何判断两条线是否交叉
yhlhelloworld的博客
03-11 548
直线A的方程可以表示为 y - y1 = k1 * (x - x1)，直线B的方程可以表示为 y - y3 = k2 * (x - x3)。联立这两个方程，解出x和y的值，得到交点。在Canvas中判断两条线是否交叉，你可以通过计算两条直线的交点来实现。检查解出的交点是否在两条直线的线段上。否则，即使计算出了交点，两条线也不被视为交叉（例如，交点在线段的延长线上）。定义每条直线的起点和终点，比如直线A由点(x1, y1)到点(x2, y2)，直线B由点(x3, y3)到点(x4, y4)。
PSLG,直线切割凸多边形，和判断圆与多边形相交
ONE_PIECE的专栏
05-15 1798
分析： 除了圆盘之外，本题的输入也是一个PSLG,因此可以按照前面叙述的算法求出各个区域。但由于本题的特殊性，不难发现把线段改成直线后答案不变，因此每个块都是凸多边形， 可以用切割凸多边形的方法求解：每读入一条线段，都把它当做直线，切割所有块。这样，我们最终得到了若干凸多边形，需要分别判断是否与圆盘相交。 如何让判断多边形是否和圆盘相交？，显然，如果多边形的边和圆周规范相交，圆盘和多变性一定
Canvas 绘制点线相交
weixin_45820444的博客
10-07 1836
  随机产生一些直线，当直线相交时产生交点，直线不断移动，交点的位置也随之改变。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas绘制点线相交</title> <style> body { background-color: #eee; overflow: hidden; } canvas { backg
jQuery页面滚动元素动画特效特效代码
03-20
要实现这样的特效，我们需要掌握以下几个关键知识点： 1. **$(window).scroll() 事件**：这是jQuery中监听页面滚动事件的方法。当用户滚动页面时，这个事件会被触发。我们可以在这个事件的回调函数中编写处理逻辑，...
HTML5 canvas点点相交线代码.zip
07-04
通常，这样的代码会包含函数，如`isPointOnLine(point, lineStart, lineEnd)`，用于判断一个点是否在由`lineStart`和`lineEnd`定义的线段上。 此外，“说明.htm”可能是一个简单的HTML页面，展示了如何使用这段代码...
原生JS实现多个小球碰撞反弹效果示例
11-28
我们需要检查两个小球是否相交，以及它们在碰撞后应该如何改变运动方向。这通常涉及到几何计算，包括两圆心距离的判断和碰撞角度的计算。在这个例子中，我们没有看到具体的碰撞检测代码，但可以假设它会涉及以下步骤...
html5 canvas鼠标点击水珠爆炸动画特效
09-08
在Canvas上实现这样的特效，主要涉及以下几个关键技术点： 1. **事件监听**：首先，我们需要监听用户的鼠标点击事件。在JavaScript中，可以使用`addEventListener`方法来监听`mousedown`、`mouseup`和`mousemove`...
HTML5 Canvas推箱子小游戏源码.zip
11-18
在这款游戏中，主要涉及到以下几个关键技术点： 1. **HTML5 Canvas**：Canvas是一个矩形区域，通过JavaScript来控制其内容的绘制。游戏的每一帧都在Canvas上进行绘制，包括游戏背景、箱子、玩家角色以及游戏的边界...
canvas 两个圆相交重叠区域颜色填充_给Canvas录制一个视频
weixin_28709649的博客
12-27 419
前言 本文Demo，点击这里访问。 说起web前端录像 网页内容,，我们的反映可能是先给页面截屏，再将一帧帧的图像合成视频，截屏的操作则是通过html 2 canvas的方式实现。 如果想要合成流畅的视频，那么就必须截出密集帧图像，这无疑是很消耗性能的。如果有一个原生的API，支持对网页录像就好了！！！本文介绍的内容包括: - MediaRecoder录制媒体流 - Canvas绘制动画 - 导出...
Canvas 相交线的拐点样式(lineJoin())
houyanhua1的专栏
04-10 1576
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &am
canvas中的碰撞检测笔记
weixin_34275734的博客
01-19 167
用 canvas 做小游戏或者特效，碰撞检测是少不了的。本文将会涉及普通的碰撞检测，以及像素级的碰撞检测。（本文的碰撞检测均以矩形为例） 普通碰撞检测 普通的矩形碰撞检测比较简单。即已知两个矩形的各顶点坐标，判断是否相交，如相交，则为碰撞。 leetcode 有道题是给出两个矩形的坐标，求其相交面积（223. Rectangle Area），代码 可以直接拿过来用，如果面积大于 0，则为碰撞。 如...
html两个圆相交,Word怎么将两个圆交叉重叠部分填充阴影?
weixin_35853975的博客
06-21 1348
最近有小伙伴向小编请教该如何用Word画出两个交叉的圆形，并把交叉部分用阴影显示。其实画图并不是Word的强项，有很多工具软件可以很方便的完成以上问题，但在Word里我们同样可以完成。看看下面的步骤吧。1、首先我们在Word编辑区插入一个圆形。方法是：依次单击“插入”--“图片”--“自选图形”。2、在自选图形工具栏，我们找到并单击“椭圆”工具，按住“shift”键，在Word编辑区画出一个正圆。...
小程序笔记—手指画一条线，如何判断自相交
WeiHan_Seven的博客
03-07 1185
在小程序canvas上画一条曲线，如何才能知道这条曲线是否自相交呢？焦点又在哪呢？因为项目需要，不得已问出这样一个问题？本来以为很简单，可是好难啊？ 实现效果： 体验： 分析： 1、这条曲线是由touchmove所返回的点通过连接绘制而成的 2、也就是这条曲线是由好多条短短的线段组成的 3、如果能判断任意两条线段是否有交点，就表明曲线相交了，线段的焦点也就是曲线的焦点 4、判断两条线段是否有交...
canvas 两个圆相交重叠区域颜色填充_canvas-isPointPath
weixin_34571272的博客
12-04 1171
含义: Canvas中很多交互的行为离不开这个属性，isPointInPath(x , y)是Canvas 2D API用于检测某点是否在路径的描边内（包括路径上）的方法，返回值是布尔值语法：isPointInPath(x , y): x代表的横坐标，y代表的纵坐标注意: 要记住其方法是针对路径的，canvas中绘制路径 arc rect方法都是可以使用该方法，判断鼠标是否位于该路径范围内，包括路...
JAVA填充圆形相交区域_在Canvas中标记两个圆圈之间的相交区域
weixin_42363662的博客
02-26 374
可以使用平2种形状的交集画布globalCompositeOperation 掌握globalCompositeOperation允许你控制哪些新老图纸的部分显示在画布。我们使用这些合成模式2突出你的2圈的交集：源之上鉴于左圆已经画出来了，源顶上只会画出只有右圆的相交部分。ctx.globalCompositeOperation="source-atop";ctx.arc(circle2.x,ci...
java判断圆形与另外一个圆形是否相交
05-25
判断两个圆形是否相交可以通过计算两个圆心之间的距离和两个圆的半径之和进行比较。 具体来说，如果两个圆心之间的距离小于两个圆的半径之和，则两个圆相交。如果两个圆心之间的距离等于两个圆的半径之和，则两个圆...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值