HTML | canvas isPointInPath() 方法

canvas isPointInPath() 方法用于检查指定点是否包含在当前路径中。如果指定点在当前路径中，则 isPointInPath() 方法返回 true，否则返回 false。

句法：

context.isPointInPath( x, y );

参数：此方法接受上面提到和下面描述的两个参数：

• x：此参数指定要检查的 x 轴坐标点。
• y: : 此参数指定要检查的 y 轴坐标点。

示例 1：如果点 (150, 150) 在路径中，则将绘制三角形。

  

    
        HTML canvas isPointInPath() Method
    

  

      
    GeeksforGeeks
      
    HTML canvas isPointInPath() Method
      
    
    
      
    
        var doc_id = document.getElementById("GFG");
        var context = doc_id.getContext("2d");
          
        context.beginPath();
        context.moveTo(100, 100);
        context.lineTo(100, 300);
        context.lineTo(300, 300);
        context.closePath();
          
        if (context.isPointInPath(150, 150)) {
            context.stroke();
        };
    

  
    

示例2：当点在路径中时，返回布尔值true。

  

    
        HTML canvas isPointInPath() Method
    

  

      
    GeeksforGeeks
      
    HTML canvas isPointInPath() Method
      
    
    
      
    
        in path: false
    
      
    
        var doc_id = document.getElementById('GFG');
        var context = doc_id.getContext('2d');
        var result = document.getElementById('result');
        context.rect(10, 10, 100, 100);
        context.fillStyle = 'green';
        context.fill();
        result.innerText = context.isPointInPath(10, 70);
    

  
             

示例 3：当点不在路径中时，返回布尔值 false。

  

    
        HTML canvas isPointInPath() Method
    

  

      
    GeeksforGeeks
      
    HTML canvas isPointInPath() Method
      
    
    
      
    
        in path: false
    
      
    
        var doc_id = document.getElementById('GFG');
        var context = doc_id.getContext('2d');
        var result = document.getElementById('result');
        context.rect(10, 10, 100, 100);
        context.fillStyle = 'green';
        context.fill();
        result.innerText = context.isPointInPath(110, 170);
    

  
              

支持的浏览器： canvas isPointInPath() 方法支持的浏览器如下：

• 谷歌浏览器
• 浏览器 9.0
• 火狐
• 苹果浏览器
• 歌剧