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.0新属性效果在ie下的解决方案
May 10 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
HTML中link标签属性的具体用法
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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
javascript读取xml
2006/11/04 Javascript
phpwind放自动注册方法
2006/12/02 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python selenium firefox使用详解
2019/02/26 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
2014年应届大学生自我评价
2014/01/09 职场文书
十佳教师事迹材料
2014/01/11 职场文书
活动策划邀请函
2014/02/06 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
合同意向书范本
2014/07/30 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
幼儿教师个人总结
2015/02/05 职场文书
小学校长开学致辞
2015/07/29 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
医院岗前培训心得体会
2016/01/08 职场文书