Html5-Canvas中使用clip的示例代码有哪些?

Html5-Canvas中使用clip的示例代码有哪些?

本想在一个fillRect中抠出一个区域来给我用的,这个是在学clip方法的时候用到的

但是怎么也弄不出扣的区域,代码如下

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title></title> 
  </head> 
  <body> 
    <canvas id="canvas" width="800" height="600"></canvas> 
  </body> 
  <script type="text/javascript"> 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    context.fillStyle = "lightgreen"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.fillRect(100, 100, 200, 100); 
    context.clip(); 
    context.closePath(); 
    context.fillStyle = "lightblue"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
  </script> 
</html> 

发现如果要抠出一个新的路径的话应该使用rect、arc等方法

所有应该在改为

context.beginPath(); 
context.rect(100, 100, 200, 100); 
context.clip(); 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持路饭。