在页面上画几个圆,判断他们是否相交
- 以点击鼠标为圆心,之后拖动鼠标为半径。
<!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>
效果如下图: