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网格的三个新特性详解
Apr 04 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 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在线生成ico文件的代码
2007/10/09 PHP
url decode problem 解决方法
2011/12/26 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php生成gif动画的方法
2015/11/05 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP7变量处理机制修改
2021/03/09 PHP
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
python文件操作相关知识点总结整理
2016/02/22 Python
python绘制多个曲线的折线图
2020/03/23 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
应届生服装设计自我评价
2013/09/20 职场文书
公积金单位接收函
2014/01/11 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
学校党员对照检查材料
2014/08/28 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL