html5 canvas 清除可以使用clearRect() 方法

clearRect() 方法的作用是清空给定矩形内的指定像素。
JavaScript 语法：
context.clearRect(x,y,width,height);

x 要清除的矩形左上角的 x 坐标
y 要清除的矩形左上角的 y 坐标
width 要清除的矩形的宽度，以像素计
height 要清除的矩形的高度，以像素计

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas_keleyi_com" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas_ke"+"leyi_com");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

</script>

</body>
</html>

clearRect清除html5画布的更多相关文章

  1. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  2. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  3. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  4. 设置清除html5页面缓存

    设置清除html5页面缓存 html5端设置 meta 标签: <meta http-equiv="Pragma" content="no-cache" ...

  5. HTML5 画布参考

    描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...

  6. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  7. html5画布基础

    canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...

  8. html5画布的旋转效果

    keleyi.htm的代码如下: <!DOCTYPE HTML> <html> <head> <title>html旋转画布-柯乐义</title ...

  9. html5 画布上的rotate使用

    作为刚进公司的毕业生,第一个项目便是开发html5游戏,于是网上搜寻各种有关html5的资料,把w3School中有关html5的教程通通过了一遍,发现里面的教程非常适合刚接触html5的人,作为菜鸟 ...

随机推荐

  1. DotNetCore学习-2.程序启动

    新创建的ASP.NET Core程序中包含两个文件,分别是Program.Startup.其中,Program中Main方法是整个应用程序的入口,该方法如下: var host = WebHost.C ...

  2. ILSpy

    今日为找泛型序列的一个Select方法源码,就去找了个ILSpy反编译工具. 工具下载地址:http://www.fishlee.net/service/softarchive/57,一般选择较新的. ...

  3. Python入门到精通学习书籍推荐！

    1.Python基础教程(第2版 修订版)<Python基础教程(第2版修订版)>包括Python程序设计的方方面面,内容涉及的范围较广,既能为初学者夯实基础,又能帮助程序员提升技能,适合 ...

  4. 2.C++中的bool类型,三目运算符,引用

    本章主要内容: 1)bool类型 2)三目运算符 3)引用 1.布尔型bool 在C++中,bool类型只有true(非0)和flase(0)两个值,且bool类型只占用了一个字节. 例如: #inc ...

  5. httpclient请求服务的各种方法实例

    <!--话不多说,直接上代码--> import com.csis.ConfigManagerimport com.csis.io.web.DefaultConfigItemimport ...

  6. GDB使用技巧

    最近使用GDB比较多,发现除了最常用的run.break.continue.next等命令的基本用法外,还有一些非常有用的命令和用法,能让你更加得心应手地使用GDB,在这里做了一下简单的总结. 1. ...

  7. X问题（中国剩余定理+不互质版应用）hdu1573

    X问题 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. 【读书笔记】iOS-基带攻击

    一,iOS设备中的蜂窝网络通信栈运行在专门的芯片上,这个芯片就是数字基带处理器. 参考资料:<黑客攻防技术宝典-iOS实战篇>

  9. 使用 Java 8 语言功能

    Android Studio 3.0 及以上版本支持所有 Java 7 语言功能,以及部分 Java 8 语言功能(具体因平台版本而异). 本页介绍您可以使用的 Java 8 语言功能.如何正确配置项 ...

  10. loadrunner 脚本开发-文件读写操作

    脚本开发-文件读写操作 by:授客 QQ:1033553122 函数说明 函数原型: size_t fwrite( const void *buffer, size_t size, size_t co ...