当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript判断线段与圆相交方法

JavaScript判断线段与圆相交方法

2025-07-22 20:45:24 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript线段与圆相交判断教程》，聊聊，我们一起来看看吧！

JavaScript 教程：判断线段与圆是否相交

本文详细介绍了如何使用 JavaScript 判断一条线段是否与一个圆相交。文章提供了两种方法，一种是判断线段与圆是否相交，另一种是计算线段与圆的交点距离。同时，避免了不必要的平方根运算，提升了性能。文章包含可运行的示例代码，帮助开发者快速理解和应用。

在 HTML5 Canvas 游戏中，碰撞检测是至关重要的环节。本文将深入探讨如何使用 JavaScript 来检测一条线段是否与一个圆相交。我们将提供两种方法：一种是直接判断是否相交，另一种是计算线段与圆的交点距离。后者在需要确定碰撞位置时非常有用。

方法一：判断线段与圆是否相交

此方法的核心思想是计算圆心到线段的距离，并与圆的半径进行比较。如果距离小于半径，则表示线段与圆相交。为了避免昂贵的平方根运算，我们直接比较距离的平方与半径的平方。

function rayInterceptsCircle(ray, circle) {
    const dx = ray.p2.x - ray.p1.x;
    const dy = ray.p2.y - ray.p1.y;
    const u = Math.min(1, Math.max(0, ((circle.x - ray.p1.x) * dx + (circle.y - ray.p1.y) * dy) / (dy * dy + dx * dx)));
    const nx = ray.p1.x + dx * u - circle.x;
    const ny = ray.p1.y + dy * u - circle.y;    
    return nx * nx + ny * ny < circle.radius * circle.radius;
}

代码解释：

ray: 表示线段，包含起点 p1 和终点 p2，格式为 {p1: {x: number, y: number}, p2: {x: number, y: number}}。
circle: 表示圆，包含圆心坐标 x, y 和半径 radius，格式为 {x: number, y: number, radius: number}。
dx 和 dy: 计算线段的 x 和 y 方向的差值。
u: 计算圆心在线段上的投影点与线段起点的距离比例。Math.min(1, Math.max(0, ...)) 确保投影点在线段上。
nx 和 ny: 计算圆心到投影点的向量。
nx * nx + ny * ny < circle.radius * circle.radius: 判断圆心到投影点的距离的平方是否小于半径的平方，从而判断是否相交。

方法二：计算线段与圆的交点距离

此方法不仅可以判断是否相交，还可以计算出线段与圆的交点距离。如果线段与圆不相交，则返回 Infinity。

function rayDist2Circle(ray, circle) {
    const dx = ray.p2.x - ray.p1.x;
    const dy = ray.p2.y - ray.p1.y;
    const vcx = ray.p1.x - circle.x; 
    const vcy = ray.p1.y - circle.y;
    var v =  (vcx * dx +  vcy * dy) * (-2 / Math.hypot(dx, dy));
    const dd = v * v - 4 * (vcx * vcx + vcy * vcy - circle.radius * circle.radius);
    if (dd <= 0) { return Infinity; }
    return  (v - Math.sqrt(dd)) / 2;
}

代码解释：

ray: 表示线段，包含起点 p1 和终点 p2。
circle: 表示圆，包含圆心坐标 x, y 和半径 radius。
dx 和 dy: 计算线段的 x 和 y 方向的差值。
vcx 和 vcy: 计算线段起点到圆心的向量。
v: 中间变量，用于计算交点距离。
dd: 判别式，用于判断是否有交点。如果 dd <= 0，则表示没有交点，返回 Infinity。
(v - Math.sqrt(dd)) / 2: 计算交点距离。

示例代码

以下是一个完整的示例，演示了如何使用上述两种方法来判断线段与圆是否相交，并在 Canvas 上进行可视化展示。

<!DOCTYPE html>
<html>
<head>
<title>线段与圆的碰撞检测</title>
<style>
canvas {
  position: absolute;
  top: 0px;
  left: 0px;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="250"></canvas>
<script>
const ctx = canvas.getContext("2d");
const TAU = Math.PI * 2;
requestAnimationFrame(renderLoop);
var W = canvas.width, H = canvas.height;


const Point = (x, y) => ({x, y}); 
const Ray = (p1, p2) => ({p1, p2}); 
const Circle = (p, radius) => ({x: p.x, y: p.y, radius});

function drawRayLeng(ray, len) {
  ctx.beginPath();
  ctx.lineTo(ray.p1.x, ray.p1.y);
  if (len < Infinity) {
    const dx = ray.p2.x - ray.p1.x;
    const dy = ray.p2.y - ray.p1.y;
    const scale = len / Math.hypot(dx, dy);
    ctx.lineTo(ray.p1.x + dx * scale , ray.p1.y + dy  * scale);
  } else {
    ctx.lineTo(ray.p2.x, ray.p2.y);
  }
  ctx.stroke();
}
function drawRay(ray) {
  ctx.beginPath();
  ctx.lineTo(ray.p1.x, ray.p1.y);
  ctx.lineTo(ray.p2.x, ray.p2.y);
  ctx.stroke();
}
function drawCircle(circle) {
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius, 0, TAU);
  ctx.stroke();
}
function rayInterceptsCircle(ray, circle) {    
    const dx = ray.p2.x - ray.p1.x;
    const dy = ray.p2.y - ray.p1.y;
    const u = Math.min(1, Math.max(0, ((circle.x - ray.p1.x) * dx + (circle.y - ray.p1.y) * dy) / (dy * dy + dx * dx)));
    const nx = ray.p1.x + dx * u - circle.x;
    const ny = ray.p1.y + dy * u - circle.y;    
    return nx * nx + ny * ny < circle.radius * circle.radius;
}
function rayDist2Circle(ray, circle) {
    const dx = ray.p2.x - ray.p1.x;
    const dy = ray.p2.y - ray.p1.y;
    const vcx = ray.p1.x - circle.x; 
    const vcy = ray.p1.y - circle.y;
    var v =  (vcx * dx +  vcy * dy) * (-2 / Math.hypot(dx, dy));
    const dd = v * v - 4 * (vcx * vcx + vcy * vcy - circle.radius * circle.radius);
    if (dd <= 0) { return Infinity; }
    return  (v - Math.sqrt(dd)) / 2;
}
const mouse  = {x : 0, y : 0}
function mouseEvents(e){
    mouse.x = e.pageX;
    mouse.y = e.pageY;
}
document.addEventListener("mousemove", mouseEvents);

const c1 = Circle(Point(150, 120), 60);
const r1 = Ray(Point(0, 50), Point(300, 50));


function renderLoop(time) {
   ctx.clearRect(0, 0, W, H);
   r1.p1.x = c1.x + Math.cos(time / 5000) * 100;
   r1.p1.y = c1.y + Math.sin(time / 5000) * 100;
   r1.p2.x = mouse.x;
   r1.p2.y = mouse.y;

   ctx.lineWidth = 0.5;
   drawCircle(c1);
   drawRay(r1);
   ctx.lineWidth = 5;
   if (rayInterceptsCircle(r1, c1)) {
     ctx.strokeStyle = "red";
     drawRayLeng(r1, rayDist2Circle(r1, c1));
   } else {
     drawRay(r1);
   }

   ctx.strokeStyle = "black";
   requestAnimationFrame(renderLoop);
}
</script>
</body>
</html>

运行步骤：

将代码保存为 HTML 文件（例如 collision.html）。
使用浏览器打开该文件。
移动鼠标，线段的终点会跟随鼠标移动。
当线段与圆相交时，线段会变为红色，并显示交点位置。

总结

本文提供了两种判断线段与圆是否相交的方法，并给出了详细的 JavaScript 代码实现和示例。第一种方法简单高效，适用于只需要判断是否相交的场景。第二种方法可以计算交点距离，适用于需要确定碰撞位置的场景。开发者可以根据实际需求选择合适的方法。在性能方面，两种方法都避免了不必要的平方根运算，提高了效率。通过本文的学习，相信开发者能够轻松地实现线段与圆的碰撞检测，并将其应用到自己的 HTML5 Canvas 游戏中。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。