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+js实现简单的时钟特效
Mar 18 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
Python实现完整的事务操作示例
2017/06/20 Python
python实现机器学习之多元线性回归
2018/09/06 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Python 实现简单的客户端认证
2020/07/29 Python
Python用Jira库来操作Jira
2020/12/28 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
交通安全演讲稿
2014/01/07 职场文书
委托书范文
2014/04/02 职场文书
倡议书作文
2015/01/19 职场文书
Elasticsearch 数据类型及管理
2022/04/19 Python