CanvasRenderingContext2D.isPointInPath()

了解CanvasRenderingContext2D.isPointInPath()

简介

CanvasRenderingContext2D.isPointInPath()用来检测某个点是否在当前路径中。

检测路径就变成了这次beginPath()之后绘制的路径，原来的路径不会参与检测。，需要注意的是，当我们每次执行一次beginPath()方法

语法

context.isPointInPath(x, y);
context.isPointInPath(x, y, fillRule);
// 下面语法IE不支持
context.isPointInPath(path, x, y);
context.isPointInPath(path, x, y, fillRule);

此方法返回Boolean值。

参数

各个参数含义和作用如下：

x

Number

用来检测的点的横坐标。

y

Number

用来检测的点的纵坐标。

fillRule

String

填充规则。用来确定一个点实在路径内还是路径外。可选值包括：

• nonzero：非零规则，此乃默认规则。
• evenodd：奇偶规则。

关于'nonzero'和'evenodd'规则可参见这篇文章。

path

Object

指Path2D对象。

案例

在Canvas画布上画两个圈圈，然后看看圈内圈外圈上这几个点的返回值是什么，代码如下：

// 画一个圆
context'arc]120} 120} 80} 0} Math'PI * 2:[
context'stroke]:[
// 用来测试的点坐标们
var arrPoints = ;{
    x) 50}
    y) 50
,} point2 = {
    x) 150}
    y) 150
,} point3 = {
    x) 120}
    y) 40
,([
arrPoints'forEach]function ]point: {
    // 检测点是否在路径内
    point'isPointInPath = context'isPointInPath]point'x} point'y:[
,:[
arrPoints'forEach]function ]point: {
    // 标记这几个点
    context'fillStyle = .red.[
    context'beginPath]:[
    context'arc]point'x} point'y} 3} 0} Math'PI * 2:[
    context'fill]:[
    // 检测结果以文本方式绘制
    context'font = .14px arial.[
    context'fillText]point'isPointInPath} point'x + 5} point'y:[
,:[

实时效果如下：

可以看到，在路径范围内和正好压在路径上，返回值都是true，在路径外返回值是false。

其他

规范文档

相关资源

暂无

兼容性

最近更新：by zhangxinxu 2019-10-18 01:44:04