canvas2d判断鼠标是否在某个不规则形状的范围内的方法

最近公司有个需求就是需要在一个canvas画面中画出一个不规则的范围，然后将坐标信息传给后端，这个范围是由若干顶点组成，然后由若干顶点组成一个不规则图形，这些顶点需要可以拖拽移动以改变区域的范围，那么此时就需要判断鼠标是否在不规则图形的区域内。

按照一般思路，我们可以通过顶点的坐标经过复杂的数学计算来获取鼠标是否在图形的区域内，但这种方法对于我这种数学渣渣来说简直是太难了，于是我就去mdn通读了canvas2d的文档，终于发现了原生的判断法方法，现在附上文档链接 判断鼠标是否在路径区域内的文档。

我现在在将其中的重要内容贴出来分享给大家：

在通过getContext获取到canvas的2d绘图上下文后，2d绘图上下文会有一个isPointInPath方法，该方法可以判断对应的坐标是否在图形范围内，该方法的语法如下：

isPointInPath(x, y)
isPointInPath(x, y, fillRule)
isPointInPath(path, x, y)
isPointInPath(path, x, y, fillRule)

1、常规用法，该方法可以直接跟在绘制的路径代码后面判断鼠标是否在该路径中：

HTML

<canvas id="canvas"></canvas>
<p>In path: <code id="result">false</code></p>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const result = document.getElementById('result');

ctx.rect(10, 10, 100, 100);
ctx.fill();
result.innerText = ctx.isPointInPath(30, 70);

2、进阶用法，常用用法在图形较少时比较方便，但在画面中图形较多时就可能出现混乱，于是我们就可以用如下语法实现更清晰的判断：

isPointInPath(path, x, y)

以上语法的path参数是canvas的path2d对象，path2d对象的具体内容请参考文档Path2d

我现在贴出我的实例代码，以供大家参考：

HTML

<canvas id="canvas" width="400" height="400"></canvas>

JavaScript

const canvasDom = document.getElementById('canvas')
const c2d = canvasDom.getContext('2d')
const points = [[12, 12], [356, 56], [312, 125], [213, 256], [125, 256], [12, 12]]
function getMoveLineToPath(pArr) {
    const p2d = new Path2D()
    pArr.forEach((point, index) => {
        if (index === 0) {
            p2d.moveTo(point[0], point[1])
        } else {
            p2d.lineTo(point[0], point[1])
        }
        if (index === pArr.length - 1) {
            p2d.closePath()
        }
    })
    return p2d
}
const polygon1Path = getMoveLineToPath(points)
c2d.stroke(polygon1Path)
c2d.fill(polygon1Path)
console.log(c2d.isPointInPath(polygon1Path, 34, 34)) // 返回true
console.log(c2d.isPointInPath(polygon1Path, 34, 264)) // 返回false

以上就是我的分享，希望对大家有帮助，若有问题，欢迎大家指正；大家也可以将自己的学习心得写在评论区，我们一起探讨。