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属性background-size使用指南
Dec 09 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 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和ACCESS写聊天室(三)
2006/10/09 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
Jquery中dialog属性小记
2010/09/03 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
javascript实现下拉菜单效果
2021/02/09 Javascript
利用Python如何生成随机密码
2016/04/20 Python
Django入门使用示例
2017/12/12 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python批量下载抖音视频
2019/06/17 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
银行青年文明号事迹材料
2014/05/31 职场文书
关于保护环境的标语
2014/06/09 职场文书
法定授权委托证明书
2014/09/27 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
家属答谢词
2015/01/05 职场文书