总结以下三种清空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. 【ABP杂烩】Extensions后缀扩展方法

    1.Extensions介绍 扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用 ...

  2. update-rc.d: error: XXX Default-Start contains no runlevels, aborting.

    root@hm-saas-db:/etc/init.d# update-rc.d confluence disable update-rc.d: error: confluence Default-S ...

  3. 【python小工具】linux 低权限密码记录 提权小套路

    #!/usr/bin/python import os, sys, getpass, time current_time = time.strftime("%Y-%m-%d %H:%M&qu ...

  4. Talk In Web Security(安全世界观): Devleping a Secure WebSite

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Reprint it anywhere u want. Why to write about Web ...

  5. Response.Redirect()和Response.RedirectPermanent()区别

    备注:这里我用到了Response.RedirectPermanent()用于做301跳转, 如:我希望访问网站的url访问地址为:http://m.shop/abc.html ,用户输入的访问地址: ...

  6. PHP开发中bcscale timezone charset的设定

    关于php的开发,有几个细节设定,需要知悉下:在项目的init.php 或 index.php 或 api.php 1. bcscale(18); 表示bc函数,默认小数点位数. 没有设定的话,默认为 ...

  7. [转]usdt omnicore testnet 测试网络

    本文转自:https://www.jianshu.com/p/417c280b8f9f Testnet 模式允许 omni core 运行在比特币测试链上,用于安全测试. 为了在 testnet 上收 ...

  8. 【转载】C#防SQL注入过滤危险字符信息

    不过是java开发还是C#开发或者PHP的开发中,都需要关注SQL注入攻击的安全性问题,为了保证客户端提交过来的数据不会产生SQL注入的风险,我们需要对接收的数据进行危险字符过滤来防范SQL注入攻击的 ...

  9. WebAPI参数传值string转bool,int转bool相关问题

    今天在公司同事问了我一个问题,用postman传递json字符串给接口,接口获取到的值不正确. 我就看到下面的json数据: { "Mark":"1" } 接口 ...

  10. c#实战开发:以太坊私链搭建(一)

    1.第一步环境搭建 运行环境:window  客户端版本:Go语言geth 下载地址https://ethereum.github.io/go-ethereum/downloads/ 以太坊API中文 ...