总结以下三种清空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. Linux编程 11(shell全局环境变量与局变环境变量)

    一.概述 在linux中,很多程序和脚本都通过环境变量来获取系统信息,存储临时数据,配置信息.环境变量是指用来存储有关shell会话和工作环境信息,允许你在内存中存储数据,以便程序或shell中运行的 ...

  2. OnlineJudge难度与正确度的相关性检验

    本着做题的心态,上了东莞理工学院的 oj 网:在选择难度的时候发现有些题目通过率和难度可能存在着某些关系,于是决定爬下这些数据简单查看一下是否存在关系. 一.新建项目 我是用 Scrapy 框架爬取的 ...

  3. springboot情操陶冶-SpringApplication(一)

    SpringApplication是所有springboot的入口类,分析此类有助于我们了解springboot的工作机制.本文以2.0.3.REALEASE版本作分析 SpringApplicati ...

  4. 深入MySQL复制(三):半同步复制

    1.半同步复制 半同步复制官方手册:https://dev.mysql.com/doc/refman/5.7/en/replication-semisync.html 默认情况下,MySQL的复制是异 ...

  5. Perl的die和warn函数

    die和warn die可以在出现错误的时候停止程序,并给出消息.默认会输出出错的程序名称和出错行号 warn函数和die函数类似,但和die的区别是不会终止程序 die和warn的参数末尾如果给了\ ...

  6. python模块导入细节

    python模块导入细节 官方手册:https://docs.python.org/3/tutorial/modules.html 可执行文件和模块 python源代码文件按照功能可以分为两种类型: ...

  7. 高可用集群之keepalived+lvs实战-技术流ken

    keepalived简介 lvs在我之前的博客<高负载集群实战之lvs负载均衡-技术流ken>中已经进行了详细的介绍和应用,在这里就不再赘述.这篇博文将把lvs与keepalived相结合 ...

  8. ListView的setOnItemClickListener位置错乱问题

    如果你对一个ListView同时addHeaderView(listhHeaderView),也就是头部视图,再加setAdapter,当你加上setOnItemClickListener事件后你会发 ...

  9. 【转载】Windows Server2012安装IIS服务器

    在云服务器的使用过程中,很多人由于习惯或者实际需要,会选择Windows Server系统服务器,较常用的版本有Windows Server2008.Windows Server2012.在Windo ...

  10. 重构——一个小例子

    菜鸟区域,老鸟绕路! 原代码,这是一个可以借阅影片的小程序,你可以想象成某个大型系统,我想代码应该都能很容易看懂: using System; using System.Collections.Gen ...