html5清空画布方法(三种)


Posted in HTML / CSS onOctober 16, 2017

总结以下三种清空canvas画布的方式:

1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:

function clearCanvas<span style="font-family: Verdana, Arial, 宋体;">()</span>  
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
    c.height=c.height;  
}

2. 使用clearRect方法:

function clearCanvas()  
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
    cxt.clearRect(0,0,c.width,c.height);  
}

3. 类似于方法2,可以用某一特定颜色填充画布,从而达到清空的目的:

function clearCanvas()  
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
      
    cxt.fillStyle="#000000";  
    cxt.beginPath();  
    cxt.fillRect(0,0,c.width,c.height);  
    cxt.closePath();  
}

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

HTML / CSS 相关文章推荐
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
CSS link与@import的区别和用法解析
May 07 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 #HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 #HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 #HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 #HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 #HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 #HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 #HTML / CSS
You might like
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
php表单处理操作
2017/11/16 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python获取一组汉字拼音首字母的方法
2015/07/01 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
python3.7添加dlib模块的方法
2020/07/01 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
SQL面试题
2013/04/30 面试题
电气专业应届生求职信
2013/11/01 职场文书
生产部经理岗位职责
2013/12/16 职场文书
优秀求职信范文分享
2013/12/19 职场文书
生物学学生自我评价
2014/01/17 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书