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


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
个人分类: Canvas
上一篇Canvas 旋转动画(rotate())
下一篇Canvas 动画帧函数(requestAnimationFrame()),流畅动画
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭