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绘制有活力的链接下划线
Jul 14 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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 柱状图实现代码
2009/12/04 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
Javascript实现的分页函数
2006/12/22 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Python实现的概率分布运算操作示例
2017/08/14 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python绘制热力图示例
2019/09/27 Python
python flask搭建web应用教程
2019/11/19 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
营业员演讲稿
2013/12/30 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
树转促学习心得体会
2014/09/10 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
导游词之江南周庄
2019/12/06 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js