canvas中如何判断点是否在路径上

最新推荐文章于 2023-06-02 17:39:29 发布

Insist_bin

最新推荐文章于 2023-06-02 17:39:29 发布

阅读量2.7k

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/Insist_bin/article/details/80282642

版权

canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

判断点是否在路径上

 
  ctx.isPointInPath( 要判断点的x坐标，要判断点的y坐标 ) 
 

<canvas id="cvs"></canvas>

<script>
    /*
    * ctx.isPointInPath( 要判断的点x轴坐标，要判断的点y轴坐标 )
    * */

    var cvs = document.querySelector( '#cvs' );
    var ctx = cvs.getContext( '2d' );
    
    ctx.rect(10,10,100,100);
    ctx.stroke();
    //获取点击的在画面的位置
    cvs.addEventListener('click', function (event) {
        var y =event.pageY - cvs.offsetTop;
        var x =event.pageX - cvs.offsetLeft;
        alert(ctx.isPointInPath(x,y));
    })
</script>