主页 > 知识库 > html5-canvas中使用clip抠出一个区域的示例代码

html5-canvas中使用clip抠出一个区域的示例代码

热门标签:阿里云 检查注册表项 使用U盘装系统 百度竞价点击价格的计算公式 硅谷的囚徒呼叫中心 智能手机 美图手机 网站建设

本想在一个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();  

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

标签:山南 怀化 黄山 贺州 通辽 烟台 湘潭 湖北

巨人网络通讯声明:本文标题《html5-canvas中使用clip抠出一个区域的示例代码》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266