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 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
详解flex:1什么意思
Jul 23 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过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
全面了解python字符串和字典
2016/07/07 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
浅谈django orm 优化
2018/08/18 Python
python使用Matplotlib画饼图
2018/09/25 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
python DataFrame 取差集实例
2019/01/30 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
会计与审计专业自荐信范文
2014/03/15 职场文书
孩子教育的心得体会
2014/09/01 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
十七岁的单车观后感
2015/06/12 职场文书
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技