当前位置：主页 > 查看内容

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

发布时间：2021-10-20 00:00| 有 位朋友查看

简介：本想在一个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=……

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

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


原文链接：https://m.jb51.net/html5/615527.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：HTML5 device access 设备访问详解 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐