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

以上就是html5-canvas中如何使用clip抠出一个区域的示例代码。彗星般的人生可以短暂,但绝不黯淡或沉沦。更多关于html5-canvas中如何使用clip抠出一个区域的示例代码请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
HTML标签之!DOCTYPE文档类型声明

如何使用html+css代码如何实现冰墩墩和雪容融效果

html中checkbox与radio样式美化的简单实例

div设置可编辑内容的方法

css设置placeholder的颜色样式的方法