<canvas>中isPointInPath()方法在不同绘制内容中的效果

最新推荐文章于 2024-11-24 12:05:49 发布
最新推荐文章于 2024-11-24 12:05:49 发布
阅读量687 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/cwsb/p/10790555.html
本文详细解析HTML5 Canvas中isPointInPath方法的使用，通过实例展示如何判断点是否在由不同图形组成的路径中，包括矩形、弧线、直线等，并探讨了加粗线条和闭合图形的影响。

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

 <canvas>是HTML5中新增加的一个元素，我们可以使用脚本（通常使用JavaScript）在上面绘制图形，就像个画布一样。我们可以用它来绘制图表、制作一些动画。默认大小为300px × 150px。

 在<canvas>中绘制图形的方法中，isPointInPath()方法用于检测指定的点是否在绘制图形的路径中，存在返回ture，不存在返回false。

注：在代码部分，红色加粗部分是重点要注意的内容哦！ 

 

在矩形中

在画布上绘制一个空心矩形，然后指定一个点，如果这个点在矩形的路径中，矩形的颜色为蓝色，否则为黑色。为了能清楚的看到那个点在哪里，我们后面再画上两条灰色的线，交叉的位置就是我们指定的点：

 1 <body>
 2     <canvas id="drawEle">
 3         您的浏览器不支持该标签
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //矩形
10         ctx.beginPath();
11         ctx.rect(10,20,280,20);       　　　 //绘制矩形区域
12         if(ctx.isPointInPath(50,25)) {      //判断(50,25)是否在矩形路径中
13             ctx.strokeStyle = "#0000FF";    //在则矩形是蓝色
14         }
15         else {
16             ctx.strokeStyle = "#000000";    //不在则矩形是黑色
17         }
18         ctx.stroke();
19         
20         //绘制定位用的直线
21         ctx.beginPath();
22         ctx.strokeStyle = "#CCCCCC";
23         ctx.moveTo(50,0);
24         ctx.lineTo(50,150);
25         ctx.stroke();
26         ctx.beginPath();
27         ctx.moveTo(0,25);
28         ctx.lineTo(300,25);
29         ctx.stroke();
30     </script>
31 </body>

运行效果如下：

 

可以看到，我们定位的点再矩形区域内部，矩形的颜色变成了蓝色，也就是说这个点的位置在矩形的路径中。

 

在弧/曲线区域中

那我们再arc()创建的弧/曲线区域中定位试试看。之后也是使用两条灰色线交叉定位我们判断的点：

 1 <body>
 2     <canvas id="drawEle">
 3         您的浏览器不支持该标签
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //弧/曲线
10         ctx.beginPath();
11         ctx.arc(150,75,50,0,1.5 * Math.PI);    //绘制圆形区域
12         if(ctx.isPointInPath(170,55)) {        //判断(170,55)是否在矩形路径中
13             ctx.strokeStyle = "#0000FF"; 　　   //在则曲线是蓝色
14         }
15         else {
16             ctx.strokeStyle = "#000000";       //不在则曲线是黑色
17         }
18         ctx.stroke();
19         
20         //绘制定位用的直线
21         ctx.beginPath();
22         ctx.strokeStyle = "#CCCCCC";
23         ctx.moveTo(170,0);
24         ctx.lineTo(170,150);
25         ctx.stroke();
26         ctx.beginPath();
27         ctx.moveTo(0,55);
28         ctx.lineTo(300,55);
29         ctx.stroke();
30     </script>
31 </body>

运行效果如下：

 

哦，圆还是蓝色的，说明定位是在路径中的。。。不对，这样子看上去好像没有闭合啊，那我们给它填充一下颜色（换成fill()）：

 1 <body>
 2     <canvas id="drawEle">
 3         您的浏览器不支持该标签
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //弧/曲线
10         ctx.beginPath();
11         ctx.arc(150,75,50,0,1.5 * Math.PI);  //绘制圆形区域
12         if(ctx.isPointInPath(170,55)) {      //判断(170,55)是否在矩形路径中
13             ctx.fillStyle = "#0000FF";       //在则曲线是蓝色
14         }
15         else {
16             ctx.fillStyle = "#000000";      //不在则曲线是黑色
17         }
18         ctx.fill();
19         
20         //绘制定位用的直线
21         ctx.beginPath();
22         ctx.strokeStyle = "#CCCCCC";
23         ctx.moveTo(170,0);
24         ctx.lineTo(170,150);
25         ctx.stroke();
26         ctx.beginPath();
27         ctx.moveTo(0,55);
28         ctx.lineTo(300,55);
29         ctx.stroke();
30     </script>
31 </body>

嗯，是没有超过区域，那我们让超过区域看看

 1 <body>
 2     <canvas id="drawEle">
 3         您的浏览器不支持该标签
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //弧/曲线
10         ctx.beginPath();
11         ctx.arc(150,75,50,0,1.5 * Math.PI);    //绘制圆形区域
12         if(ctx.isPointInPath(180,45)) {        //判断(180,45)是否在矩形路径中
13             ctx.fillStyle = "#0000FF";        //在则曲线是蓝色
14         }
15         else {
16             ctx.fillStyle = "#000000";        //不在则曲线是黑色
17         }
18         ctx.fill();
19         
20         //绘制定位用的直线
21         ctx.beginPath();
22         ctx.strokeStyle = "#CCCCCC";
23         ctx.moveTo(180,0);
24         ctx.lineTo(180,150);
25         ctx.stroke();
26         ctx.beginPath();
27         ctx.moveTo(0,45);
28         ctx.lineTo(300,45);
29         ctx.stroke();
30     </script>
31 </body>

变黑了，说明这个点不再路径中。

 

在直线中

 接下来就到最简单的线条了。其实写这个笔记就是因为这个线条来着┑(￣ ▽ ￣)┍

使用moveTo()和lineTo()结合，创建一根直线，定位点在路径中直线为蓝色，否则为黑色。使用一条灰色线交叉定位我们判断的点：

 1 <body>
 2     <canvas id="drawEle">
 3         您的浏览器不支持该标签
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //直线
10         ctx.beginPath();
11         ctx.moveTo(40,40);
12         ctx.lineTo(260,40);
13         if(ctx.isPointInPath(150,40)) {        //判断(150,40)是否在矩形路径中
14             ctx.strokeStyle = "#0000FF";       //在则直线是蓝色
15         }
16         else {
17             ctx.strokeStyle = "#000000";       //不在则直线是黑色
18         }
19         ctx.stroke();
20         
21         //绘制定位用的直线
22         ctx.beginPath();
23         ctx.strokeStyle = "#CCCCCC";
24         ctx.moveTo(150,0);
25         ctx.lineTo(150,150);
26         ctx.stroke();
27     </script>
28 </body>

欸，怎么是黑色的啊，我不是定位点的y轴和线条两个点的y轴都重合了么？

就是这个情况，定位点如果定位在使用moveTo()和lineTo()绘制的直线中间自动生成的线上，是会返回false的！

 那把定位点完全重合moveTo()的点试试看：

 1 <body>
 2     <canvas id="drawEle">
 3         您的浏览器不支持该标签
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //直线
10         ctx.beginPath();
11         ctx.moveTo(40,40);
12         ctx.lineTo(260,40);
13         if(ctx.isPointInPath(40,40)) {        //判断(40,40)是否在直线路径中
14             ctx.strokeStyle = "#0000FF";    //在则直线是蓝色
15         }
16         else {
17             ctx.strokeStyle = "#000000";    //不在则直线是黑色
18         }
19         ctx.stroke();
20         
21         //绘制定位用的直线
22         ctx.beginPath();
23         ctx.strokeStyle = "#CCCCCC";
24         ctx.moveTo(40,0);
25         ctx.lineTo(40,150);
26         ctx.stroke();
27     </script>
28 </body>

蓝了，蓝了，它蓝了！

 

那接下来我们用moveTo()和lineTo()做一个闭合的图形康康，定位就设在一条边中间，用两条灰色的线条交叉标记我们定位的点：

 1 <body>
 2     <canvas id="drawEle">
 3         您的浏览器不支持该标签
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //直线
10         ctx.beginPath();
11         ctx.moveTo(40,40);
12         ctx.lineTo(260,40);
13         ctx.lineTo(260,130);
14         ctx.closePath();
15         if(ctx.isPointInPath(150,40)) {        //判断(150,40)是否在路径中
16             ctx.fillStyle = "#0000FF";    //在则直线是蓝色
17         }
18         else {
19             ctx.fillStyle = "#000000";    //不在则直线是黑色
20         }
21         ctx.fill();
22         
23         //绘制定位用的直线
24         ctx.beginPath();
25         ctx.strokeStyle = "#CCCCCC";
26         ctx.moveTo(150,0);
27         ctx.lineTo(150,150);
28         ctx.stroke();
29 
30         ctx.beginPath();
31         ctx.moveTo(0,40);
32         ctx.lineTo(300,40);
33         ctx.stroke();
34     </script>
35 </body>

这个区域这个时候是蓝的了。也就是说不是闭合区域的时候，moveTo()和lineTo()中的线条是不算在区域内的，得闭合后才算。（对于这个观点，其实我是觉得有点怪怪的，感觉这个观点应该是接近正确答案但它不是正确答案）

 

在加粗的直线末端中

 

假如线条宽度有20px，上面我们知道只有和路径点重合了才算，那加粗的线条还是和路径点重合了算还是路径点y轴（假设是横线，那么就当它是长方形吧，竖这的边上任意一点）也算，这也是刚刚突然想到的，试试看：

 1 <body>
 2     <canvas id="drawEle">
 3         您的浏览器不支持该标签
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //直线
10         ctx.beginPath();
11         ctx.moveTo(40,40);
12         ctx.lineTo(260,40);
13         ctx.lineWidth = 40;
14         if(ctx.isPointInPath(40,35)) {        //判断(40,35)是否在矩形路径中
15             ctx.strokeStyle = "#0000FF";    //在则直线是蓝色
16         }
17         else {
18             ctx.strokeStyle = "#000000";    //不在则直线是黑色
19         }
20         ctx.stroke();
21         
22         //绘制定位用的直线
23         ctx.beginPath();
24         ctx.lineWidth = 1;
25         ctx.strokeStyle = "#CCCCCC";
26         ctx.moveTo(40,0);
27         ctx.lineTo(40,150);
28         ctx.stroke();
29 
30         ctx.beginPath();
31         ctx.moveTo(0,35);
32         ctx.lineTo(300,35);
33         ctx.stroke();
34     </script>
35 </body>

看起来还是得和路径点重合。

那加粗后闭合呢？

 1 <body>
 2     <canvas id="drawEle">
 3         您的浏览器不支持该标签
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //直线
10         ctx.beginPath();
11         ctx.moveTo(40,40);
12         ctx.lineTo(260,40);
13         ctx.lineTo(260,130);
14         ctx.closePath();
15         ctx.lineWidth = 40;
16         if(ctx.isPointInPath(40,35)) {        //判断(40,35)是否在矩形路径中
17             ctx.f = "#0000FF";    //在则直线是蓝色
18         }
19         else {
20             ctx.strokeStyle = "#000000";    //不在则直线是黑色
21         }
22         ctx.stroke();
23         
24         //绘制定位用的直线
25         ctx.beginPath();
26         ctx.lineWidth = 1;
27         ctx.strokeStyle = "#CCCCCC";
28         ctx.moveTo(40,0);
29         ctx.lineTo(40,150);
30         ctx.stroke();
31 
32         ctx.beginPath();
33         ctx.moveTo(0,35);
34         ctx.lineTo(300,35);
35         ctx.stroke();
36     </script>
37 </body>

没有区别，也就是说加粗的部分并不算在路径内。

 

 

参考资料：MDN - Canvas​Rendering​Context2D.isPoint​InPath() : https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/isPointInPath

 

转载于:https://www.cnblogs.com/cwsb/p/10790555.html

canvas三种方法绘制矩形（图文示例）
大剑师兰特的GIS世界
11-26 4289
canvas只支持一种原生的图形绘制：`矩形`。所有其他图形都至少需要生成一种路径 (path)。canvast 提供了三种方法绘制矩形。 1、fillRect(x, y, width, height)：绘制一个填充的矩形。 2、strokeRect(x, y, width, height)：绘制一个矩形的边框。 3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。
canvas绘制不同样式的五角星（图文示例）
大剑师兰特的GIS世界
01-18 1700
如何使用canvas绘制不同样式的五角星呢？这里面要确定每个五角星围绕中心点的角度是72度，这里封装了一个函数star(ctx, x, y, R, r, angle,fillColor,strokeColor)，可以设定不同的值，来产生不同样式的五角星。
【绘制】HTML5 Canvas中isPointInPath介绍和使用（判断是否在路径内，并实现拖拽小方块）
苏一恒
09-15 1908
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 介绍 isPointInPath()判断路径中是否包含监测点（作为参数传入）。 isPointInPath()介绍 方法 ...
html5的canvas知识总结（8）isPointInPath、isPointInStroke、解决canvas高分屏模糊、非零环绕原则
zyz00000000的博客
09-15 3204
1.  ctx.isPointInPath(80,80)：判断点是否在上面路径的区域内。 ctx.isPointInStroke(80,50)：判断点是否在上面路径的边缘线上。 浏览器支持情况： （1）Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 isPointInPath() 方法。 注释：Internet Expl...
canvas中isPointInPath只对最后一个路径生效的问题
m0_54741495的博客
06-25 608
只有在点击黄色时候才会返回true,而红色和蓝色为false,就是因为绘制黄色的时候,使用了close方法将之前的路径给关闭了.isPointInPath函数用来检测当前坐标位置在画布中是否处于某个元素之中,函数返回为true或者false。但是在这个过程中,有一个坑,那就是isPointInPath检测方法只对最后一条路径生效.在每一次绘制的时候都调用。成功解决问题,给个赞吧。
canvas---isPointInPath事件 jcanvas
weixin_41069726的博客
04-22 300
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equ...
isPointInPath方法
逆退相干
08-30 1007
canvas中如果用路径画了一个多边形，或者圆，想在点击多边形或者圆的时候删掉它，如何实现呢？ 可以用isPointInPath方法，这个方法可以判断坐标是否在路径内 以下引用一篇文章： “ [b] 了解canvas这个标签后，会发现在一个canvas类似一个img图片，在canvas中绘制的图形都是一个整体，所有的事件也都是发生在这一个标签上，没有办法直接判断事件是发生...
HTML5 canvas基本绘图之绘制线段
12-13
在这个话题中，我们将深入探讨如何利用`<canvas>`进行基本的线段绘制。 首先，`<canvas>`标签提供了一个画布，可以通过CSS属性如`height`和`width`来定义其尺寸。在HTML文档中，`<canvas>`标签与其他HTML元素类似，...
canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上
weixin_30782331的博客
05-11 1538
canvas 里绘制的图形不是一个实体 DOM，所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多。 所以，我们需要使用一个 canvas 的 isPointInPath(x, y) 方法，来获取鼠标相对于浏览器的坐标，然后还需要计算出鼠标相对于 canvas 画布的坐标，最后通过 isPointInPath(x, y) 方法判断此坐标是否在绘制的元素上，进行相应的操作。 is...
html5 canvas绘制七巧板图形代码
11-06
在HTML中，我们创建一个`<canvas>`元素，并通过JavaScript获取其上下文（通常是2D渲染上下文）： ```html <canvas id="myCanvas" width="500" height="500"></canvas> ``` ```javascript const canvas = document....
canvas学习（十四）：canvas交互之isPositonInPath
总有一天，你的日积月累，会成为别人的望尘莫及
08-04 1129
先说说用到的两个方法： 1、isPositonInPath(x,y):判断(x,y)是否在canvas绘制的图形所在路径中。不太理解的可以参考W3School中的“HTML5 canvas isPointInPath() 方法” 2、getBoundingClientRect()：这个方法用来用来获取元素位置，即获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundin...
Canvas 中 isPointInPath
SWSHBON的博客
09-20 1694
canvas 中的交互很多都可以用isPointInPath来完成 isPointInPath –就是一个检测你的点击或者触摸下是否在这个区域内。 有人会说 很简单啊 在一个区域内 四个点的坐标就可以判断 数学方式不难的 这时候要是来一个月牙形 而且在月弯的空白处点击，我 想你也会感叹 真是扯犊子般的难过了。 首先 大家都知道 canvas 是基于状态绘图的 就是先声明路径
isPointInPath(x,y)
youhebuke225的博客
11-19 369
在HTML5的Canvas中，是CanvasRenderingContext2D对象的一个方法，用于判断指定的点(x,y)
canvas中的isPointInPath(x,y)
weixin_43269800的博客
02-15 807
ctx.isPointInPath(x,y) 它是 Canvas 2D API 用于判断在当前路径中是否包含检测点的方法。 语法 boolean ctx.isPointInPath(x, y); boolean ctx.isPointInPath(x, y, fillRule); boolean ctx.isPointInPath(path, x, y); boolean ctx.isPointI...
为canvas绘制的多个图形设置点击事件
热门推荐
MooreLxr的博客
08-03 2万+
一、给Canvas元素绑定事件基础知识 由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的哪一个图形上，就需要增加代码来进行处理。 基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。 第一步：封装一个获取...
canvas画布实现拖拽碰撞 canvas之isPointInPath解析
lanseguhui的博客
08-24 3203
isPointInPath():判断指定的坐标点是否在canvas绘制的路径中,如果在返回true,如果不在返回false,只能判断最后一个绘制的封闭路径 注意:strokeRect()   fillRect();这两个方法不适用于isPointInPath() 在canvas画布中所有的移动,都是通过清空画布重新绘制的,并不是向js中的dom元素一样移动,可以通过设置某一个具体对象的left...
canvas 在其他画好的上面继续画_<canvas>中isPointInPath()方法在不同绘制内容中的效果...
weixin_35094438的博客
12-29 405
是HTML5中新增加的一个元素，我们可以使用脚本(通常使用JavaScript)在上面绘制图形，就像个画布一样。我们可以用它来绘制图表、制作一些动画。默认大小为300px × 150px。在中绘制图形的方法中，isPointInPath()方法用于检测指定的点是否在绘制图形的路径中，存在返回ture，不存在返回false。注：在代码部分，红色加粗部分是重点要注意的内容哦！在矩形中在画布上绘制一个空...
javascript七基础学习系列三千二百六十一：绘制路径
m0_68635815的博客
11-24 303
 arc(x, y, radius, startAngle, endAngle, counterclockwise)：以坐标(x, y)为圆。 bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：以(c1x, c1y)和(c2x, c2y)为控制点， quadraticCurveTo(cx, cy, x, y)：以(cx, cy)为控制点，绘制一条从上一点到(x, y)如果路径已经完成，则既可。 moveTo(x, y)：不绘制线条，只把绘制光标移动到(x, y)。
canvas isPointInPath
farmwang的专栏
08-22 1759
由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件。例如，如果我们最后画的是右腿，那么我们只能判断是否点击了右腿，而不能判断身体的其他部分——右腿最后画。 这种问题的解决方法是：当点击事件发生时，重绘所有图形，每绘制一个就使用isPointInPath方法，判断事件坐标是否在该图形覆盖范围内。
在js中如何给canvas画布绘制出的元素添加点击事件
最新发布
06-14
<think>我们正在讨论如何在Canvas上为绘制的...> [^1]: 引用内容涉及Canvas交互实现方案和图形绘制方法 > [^2]: 引用内容说明事件监听器和坐标获取的实现方式 > [^4]: 引用内容涉及事件监听和重绘机制的关键技术点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值