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的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
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截取中文字符串的问题
2006/07/12 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
Python实现高效求解素数代码实例
2015/06/30 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
python能做哪方面的工作
2020/06/15 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
便利店的创业计划书
2014/01/15 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
无房证明样本
2015/06/17 职场文书
奠基仪式致辞
2015/07/30 职场文书
中学语文教学反思
2016/02/16 职场文书
python实现三次密码验证的示例
2021/04/29 Python