HTML |画布剪辑()方法

clip()方法用于从给定/原始画布中剪辑任何形状和大小的区域/部分。裁剪区域后，其他绘图只能应用于裁剪区域。尽管可以使用 save() 和 restore() 方法返回到之前的画布。

句法：

context.clip();

例子：

  

    
        HTML canvas clip() Method
    

  

  
    GeeksforGeeks
  
    HTML canvas clip() Method
    Before clip():
    
    
  
    
        var doc_id = document.getElementById("GFG");
        var context = doc_id.getContext("2d");
  
        // Draw a rectangle
        context.rect(100, 20, 200, 120);
        context.stroke();
  
        // Draw green rectangle
        context.fillStyle = "green";
        context.fillRect(50, 50, 150, 100);
    
    After clip():
    
    
  
    
        var doc_id = document.getElementById("GFG2");
        var context = doc_id.getContext("2d");
        // Clip a region
        context.rect(100, 20, 200, 120);
        context.stroke();
        context.clip();
  
        // Draw green rectangle after clip()
        context.fillStyle = "green";
        context.fillRect(50, 50, 150, 100);
    

  

输出：

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

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