• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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 device access 设备访问详解
    下一篇:基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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