cvmachine.com - 申博开户网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:Html5-Canvas中使用clip的示例代码有哪些?

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

2018-06-09 08:30:25 来源:www.cvmachine.com 【

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(); 

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

 

本文地址:http://www.cvmachine.com/a/question/98814.html
Tags: 抠出 clip html5-canvas
编辑:申博开户网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部