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系列之3D制作方法案例
Aug 14 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
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
PHP5中虚函数的实现方法分享
2011/04/20 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python中pip的安装与使用教程
2018/08/10 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
高级电工工作职责
2013/11/21 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
三年级学生评语大全
2014/12/26 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
明确岗位职责
2015/02/14 职场文书
第二次离婚起诉书
2015/05/18 职场文书
小平您好观后感
2015/06/09 职场文书