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系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 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算开始时间到过期时间的相隔的天数
2011/01/12 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
Vue的MVVM实现方法
2017/08/16 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
python进阶教程之循环对象
2014/08/30 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
numpy基础教程之np.linalg
2019/02/12 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
网络安全方面的面试题
2016/01/07 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
岗位廉洁从政承诺书
2014/03/27 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
新郎答谢词
2015/01/04 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python