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图标制作教程制作云图标
Jan 19 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
PHP中Array相关函数简介
2016/07/03 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
python使用Image处理图片常用技巧分析
2015/06/01 Python
python基础之入门必看操作
2017/07/26 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
详解python中init方法和随机数方法
2019/03/13 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
解决Python安装cryptography报错问题
2020/09/03 Python
python中xlutils库用法浅析
2020/12/29 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
应届大学生的推荐信
2013/11/20 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
员工工作表扬信范文
2014/01/13 职场文书
房地产推广策划方案
2014/05/19 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
质量标语大全
2014/06/12 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
孙振耀退休感言
2015/08/01 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书