canvas上，用javascript如何判断一个点位是否在某个圆内？

最新推荐文章于 2023-06-19 10:49:59 发布

芒果好好吃

最新推荐文章于 2023-06-19 10:49:59 发布

阅读量4.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： canvas javascript 圆

本文链接：https://blog.youkuaiyun.com/hi_lemon/article/details/88568688

本文介绍了一种判断点是否位于圆内的算法，通过计算点到圆心的距离并与圆半径比较实现。此外，还探讨了如何根据圆心坐标和半径计算圆周上任意角度的坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先明确一个数学原理，判断点是否在圆内？则需要判断点到圆心的距离：
1.若大于圆半径，点在圆外；
2.若等于圆半径，点在圆上；
3.若小于圆半径，点在圆内；

<canvas id="canvasId" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

假设圆心坐标为(a,b)，圆半径为circleR,点若在圆内则返回true，否则返回false

var canvas = document.getElementById("canvasId");
canvas.onclick = function () {
	//获取用户大大鼠标点击的点位坐标
    var p = {};
    p.x = event.clientX - canvas.getBoundingClientRect().left;
    p.y = event.clientY - canvas.getBoundingClientRect().top;//为了兼容IE
    //求点到圆心的距离，用到了勾股定理
    var dis = Math.sqrt((p.x - a) * (p.x - a) + (p.y - b) * (p.y - b));//Math.sqrt()求平方跟
    if(dis <= circleR){
        return true;
    }
    return false;
}

另外多说一嘴~之前有个需求需要根据圆心坐标求出圆上的点坐标，同样假设圆心坐标为(a,b)，圆半径为r，圆上坐标为(x,y)，且圆上的点位针对顺时针水平方向应该是有个偏转角度的，设为α，则：

x = a + Math.cos(2 * Math.PI / 360 * α) * r; //Math.cos(0)=1
y = b + Math.sin(2 * Math.PI / 360 * α) * r; //Math.sin(0)=0