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 相关文章推荐
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Python复制文件操作实例详解
2015/11/10 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
2014年健康教育实施方案
2014/02/17 职场文书
给校长的建议书100字
2014/05/16 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
4s店活动策划方案
2014/08/25 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
小学安全工作总结2015
2015/05/18 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
Python入门之基础语法详解
2021/05/11 Python