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 中的@keyframes介绍
Sep 02 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
用CSS3画一个爱心
Apr 27 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
一个取得文件扩展名的函数
2006/10/09 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
js注册时输入合法性验证方法
2017/10/21 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
python将数组n等分的实例
2019/12/02 Python
财务经理的岗位职责
2013/12/17 职场文书
计算机相关的自我评价
2014/01/15 职场文书
七一党建活动方案
2014/01/28 职场文书
商场总经理岗位职责
2014/02/03 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
项目投资合作意向书
2014/07/29 职场文书
工作表扬信
2015/01/17 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
奠基仪式致辞
2015/07/30 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
tomcat下部署jenkins的方法
2022/05/06 Servers