总结以下三种清空canvas画布的方式:

1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:

function clearCanvas()
{
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
c.height=c.height;
}

2. 使用clearRect方法:

function clearCanvas()
{
var cxt=document.getElementById("myCanvas").getContext("2d");
cxt.clearRect(,,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(,,c.width,c.height);
cxt.closePath();
}

原文地址:https://blog.csdn.net/inuyasha1121/article/details/53925538

(网页)html5 canvas清空画布方法(转)的更多相关文章

  1. HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素

    欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...

  2. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  3. (网页)HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath(转)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  5. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  6. 提高HTML5 canvas性能的几种方法

    简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...

  7. HTML5 canvas translate() 方法

    HTML5 canvas translate() 方法 translate() 方法重新映射画布上的 (0,0) 位置.

  8. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  9. HTML5 Canvas 获取网页的像素值。

    我之前在网上看过一个插件叫做出JScolor   颜色拾取器  说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值. 自从HTML5 画布出来之后.就有更好的方法来 ...

随机推荐

  1. strace命令用法

    -tt 在每行输出的前面,显示毫秒级别的时间 -T 显示每次系统调用所花费的时间 -v 对于某些相关调用,把完整的环境变量,文件stat结构等打出来. -f 跟踪目标进程,以及目标进程创建的所有子进程 ...

  2. asp.net core 2.0发布到IIS流程及报错解决方案

      我这是个新装的服务器,没有安装任何软件. 一.发布流程 1.安装AspNetCoreModule托管模块,同时会自动安装..net core runtime DotNetCore.2.0.8-Wi ...

  3. springboot Aop 统一处理Web请求日志

    1.增加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  4. 纸上谈兵: AVL树[转]

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 二叉搜索树的深度与搜索效率 我们在树, 二叉树, 二叉搜索树中提到,一个有n个节点 ...

  5. web.xml配置web中的key points(下)

    一.配置jsp页面 [jsp-config]中有两个子元素[taglib][jsp-property-group],注意,前者必须出现在后者之前. ①[taglib]替代jsp页面中taglib指令 ...

  6. Spring Boot中使用断路器

    断路器本身是电路上的一种过载保护装置,当线路中有电器发生短路时,它能够及时的切断故障电路以防止严重后果发生.通过服务熔断(也可以称为断路).降级.限流(隔离).异步RPC等手段控制依赖服务的延迟与失败 ...

  7. shiro + jwt 实现 请求头中的 rememberMe 时间限制功能

    前言: 上一篇提出, 通过修改 rememberMe 的编码来实现 rememberMe的功能的设想, 事后我去尝试实现了一番, 发现太麻烦, 还是不要那么做吧. 程序还是要越简单越好. 那功能总是要 ...

  8. 让Python代码更快运行的 5 种方法

    不论什么语言,我们都需要注意性能优化问题,提高执行效率.选择了脚本语言就要忍受其速度,这句话在某种程度上说明了Python作为脚本语言的不足之处,那就是执行效率和性能不够亮.尽管Python从未如C和 ...

  9. Angular2入门:TypeScript的类 - 参数属性:定义和初始化类成员

  10. js中对象和对象创建方法

    这一次我们来说一说在JavaScript中经常会用到的一个复杂基本类型,对象,先从对象的属性讲起,再讲对象的创建方法,基本涵盖了创建对象的各种方法,大家一起学习呀~ 一.对象 要掌握对象的使用及继承, ...