Canvas 判断点是否在路径内(isPointInPath())

原创 2018年04月15日 22:08:52


demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>  
        canvas {  
            border:1px solid red;  
        }  
    </style>
</head>
<body>
    <canvas id="cvs"></canvas>
    <script>
        var cvs = document.querySelector( '#cvs' );
        var ctx = cvs.getContext( '2d' );

        /*
        * 判断点在不在路径中:
        * ctx.isPointInPath( 要判断的点x轴坐标,要判断的点y轴坐标 )  //相对画布的坐标
        * */

        ctx.rect( 10, 10, 100, 100 );  //路径
        ctx.stroke();

        // 点击画布,判断点击的位置在不在路径中
        cvs.addEventListener( 'click', function( e ) {
            var x = e.pageX - cvs.offsetLeft;
            var y = e.pageY - cvs.offsetTop;
            alert( ctx.isPointInPath( x, y ) );
        } )
    </script>
</body>
</html>


canvas isPointInPath

由于isPointInPath方法仅判断当前上下文环境中的路径,所以当Canvas里已经绘制了多个图形时,仅能以最后一个图形的上下文环境来判断事件。例如,如果我们最后画的是右腿,那么我们只能判断是否点...
  • farmwang
  • farmwang
  • 2015年08月22日 17:05
  • 975

JS实现判断点是否在多边形内部(1)--射线法理论

原文地址:http://www.html-js.com/article/1517 ( 前端乱炖)随便涂一个多边形和一个点,现在我要给出一种通用的方法来判断这个点是不是在多边形内部(别告诉我用肉眼观察…...
  • u283056051
  • u283056051
  • 2017年01月02日 17:50
  • 934

C 判断点是否在多边形内

FROM:http://blog.csdn.net/okvee/article/details/5643407 // 功能:判断点是否在多边形内 // 方法:求解通过该点的水平线与多边形各边的交点...
  • u010059658
  • u010059658
  • 2015年09月23日 15:08
  • 510

画射线法判断点是否在多边形内

这次讲一个图形学的问题,毕竟在做图像处理的时候经常也会用到这个来确定范围。这个问题就是已知多边形的各条边,如何确定某个点是否在多边形内部呢? 我们来观察几幅图。 根据观...
  • u011021773
  • u011021773
  • 2016年11月10日 18:29
  • 1155

判断点是否在多边形的内部(C#)

要判断点是否在多边形的内部,适用于任意多边形的方法最常用的就是射线法,即以要判断的点向左或者向右作水平射线,与多边形交点的个数为奇数个时则在多边形的内部,若为偶数个交点时则在多边形的外部,其中0个交点...
  • xxdddail
  • xxdddail
  • 2015年10月13日 09:17
  • 4231

[ACM] hdu Cupid's Arrow (判断点是否在多边形内)

Cupid's Arrow Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) To...
  • sr19930829
  • sr19930829
  • 2014年02月24日 14:39
  • 1652

判断点是否在矩形内碰撞代码

bool CheckNpcSquareCollided(XNpc npc) {         int nCollisionRange = npc.NpcTemplate == null ? 0 ...
  • cwj649956781
  • cwj649956781
  • 2014年08月13日 22:10
  • 1064

python3射线法判断点是否在多边形内

#!/usr/bin/python3.4 # -*- coding:utf-8 -*- def isPointinPolygon(point, rangelist): #[[0,0],[1,1],...
  • sinat_36811967
  • sinat_36811967
  • 2017年11月22日 19:06
  • 362

GDI+如何判断一个点是否在区域内

https://msdn.microsoft.com/en-us/library/windows/desktop/ms533826(v=vs.85).aspx The purpose...
  • lgh1992314
  • lgh1992314
  • 2016年10月24日 12:20
  • 1116

判断点是否在椭圆内部

跟判断点是否在圆内思路相似,将P(x,y)的x代入此椭圆方程(x-x1)^2/A^2+(y-y1)^2/B^2=1;得到解(2个,1个,无解)。无解,当然不在椭圆内。有解,P点的y值是否在[Min(解...
  • PengPengBlog
  • PengPengBlog
  • 2016年11月18日 10:35
  • 2680
收藏助手
不良信息举报
您举报文章:Canvas 判断点是否在路径内(isPointInPath())
举报原因:
原因补充:

(最多只允许输入30个字)