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+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
php导出excel格式数据问题
2014/03/11 PHP
php实现的递归提成方案实例
2015/11/14 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
PDO::commit讲解
2019/01/27 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Python中字符串List按照长度排序
2019/07/01 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
单位未婚证明范本
2014/01/18 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python