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 相关文章推荐
纯CSS3实现图片无间断轮播效果
Aug 25 HTML / CSS
CSS3制作日历实现代码
Jan 21 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
JAVA软件工程师测试题
2014/07/25 面试题
新浪微博实习心得体会
2014/01/27 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
追悼会主持词
2014/03/20 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
团代会开幕词
2015/01/28 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
详解Go与PHP的语法对比
2021/05/29 PHP
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA