CanvasRenderingContext2D:isPointInPath() 方法
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Canvas 2D API 的 CanvasRenderingContext2D.isPointInPath()
方法用于判断当前路径中是否包含指定点。
语法
js
isPointInPath(x, y)
isPointInPath(x, y, fillRule)
isPointInPath(path, x, y)
isPointInPath(path, x, y, fillRule)
参数
返回值
Boolean
-
一个布尔值,若指定点包含在当前或指定的路径内,返回
true
;否则返回false
。
示例
检查当前路径中的点
此示例使用 isPointInPath
方法检查某点是否在当前的路径内。
HTML
html
<canvas id="canvas"></canvas>
<p>在路径内:<code id="result">否</code></p>
JavaScript
js
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) ? "是" : "否";
结果
检查特定路径中的点
此示例在鼠标移动时检测光标是否在一个圆形的 Path2D
路径内。如果是,圆形变为绿色,否则为红色。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 创建圆形
const circle = new Path2D();
circle.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle);
// 监听鼠标移动
canvas.addEventListener("mousemove", (event) => {
// 检查鼠标位置是否在圆形内
const isPointInPath = ctx.isPointInPath(circle, event.offsetX, event.offsetY);
ctx.fillStyle = isPointInPath ? "green" : "red";
// 绘制圆形
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fill(circle);
});
规范
Specification |
---|
HTML Standard # dom-context-2d-ispointinpath-dev |
浏览器兼容性
BCD tables only load in the browser
Gecko 特定说明
Gecko 7.0(Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)之前,这个方法在比较指定点与路径位置时,未正确地将指定点的坐标乘以当前的变换矩阵。现在,即使上下文进行了旋转、缩放或其他变换,该方法也能正确地工作了。
参见
- 定义此方法的接口:
CanvasRenderingContext2D