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背景_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 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
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
JS实现的省份级联实例代码
2013/06/24 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
js实现简易计算器功能
2019/10/18 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
酒店实习个人鉴定
2013/12/07 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
卫生标语大全
2014/06/21 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
毕业生见习报告总结
2014/11/08 职场文书
周一问候语大全
2015/11/10 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
Ruby处理CSV数据方法详解
2022/04/18 Ruby
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android