让你马上明白isPointInPath 属性—— canvas的 isPointInPath 属性测试案例

最新推荐文章于 2025-06-20 07:29:27 发布

原创最新推荐文章于 2025-06-20 07:29:27 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #前端

前端专栏收录该内容

29 篇文章

订阅专栏

本文通过实例演示了如何使用HTML5 Canvas API绘制矩形并判断指定点是否位于所绘制的矩形内部。首先创建了一个300x150像素的画布，并在其上绘制两个矩形。然后利用isPointInPath方法检查特定坐标点是否位于这些矩形的边界之内。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas事件</title>
</head>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    //注意：canvas不支持变量存储，所以，isPointInPath只对当前路径有效! 

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    ctx.strokeStyle="red";
    ctx.rect(20,20,50,50);  //配置位置和大小，X=20，Y=20 ,width=50,height=50

    //矩形绘制范围计算： ctx左上角坐标为（0, 0); x,y分别为20，所以，长宽的起始范围为20，终止范围为：坐标距离 + 矩形的长宽 ，20+50 = 70
    //设置的点的位置在，X = 70 ,Y = 70，而绘制的矩形图像范围为 长(x)  = 20~70 宽(y) = 20~70,
    //点 处于矩形的范围内（包括边）所以显示
    if (ctx.isPointInPath(70,70))
    {
        ctx.stroke(); //描绘
    };

    ctx.beginPath();  //重新描绘
    ctx.rect(70,70,50,50);  //配置位置和大小，X=70，Y=70 ,width=50,height=50

    //此时， 当前路径为：ctx.rect(70,70, 50, 50);同理
    //设置的点的位置在，X = 120 ,Y = 121，而绘制的矩形图像范围为 长(x) = 70~120 宽(y) = 70~120,
    //点不处于矩形的范围内（包括边）所以不显示
    if (ctx.isPointInPath(120,120))
    {
        ctx.stroke();  //描绘
    };

</script>

</body>
</html>