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


Posted in HTML / CSS onMay 25, 2018

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

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

HTML / CSS 相关文章推荐
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 #HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 #HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 #HTML / CSS
使用Canvas操作像素的方法
Jun 14 #HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 #HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 #HTML / CSS
详解Canvas事件绑定
Jun 27 #HTML / CSS
You might like
PHP生成带有雪花背景的验证码
2006/10/09 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
python如何在终端里面显示一张图片
2016/08/17 Python
python字符串常用方法
2018/06/14 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
关于Python解包知识点总结
2020/05/05 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
大学生自我鉴定
2013/12/08 职场文书
材料采购员岗位职责
2013/12/17 职场文书
写自荐信的注意事项
2014/03/09 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python