HTML5画布: clearRect()

原创 2015年08月06日 14:46:09

clearRect()是用来清除画布的一个矩形。

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);

context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120, 110);

context.clearRect(50, 30, 110, 35);

红色和蓝色矩形的矩形现已清除。

如前面提到的,使用清除clearRect()区域变得透明。假如有画布分层 那透明区域底下将可见/


版权声明:本文为博主原创文章,未经博主允许不得转载。

clearRect()不能清楚路径

定义: clearRect() 方法清空给定矩形内的指定像素。 注意: clearRect()不能清楚路径。 案例: Document onloa...
  • microcosmv
  • microcosmv
  • 2017年03月12日 00:44
  • 387

HTML5 Canvas遇到的几个问题

最近在一个项目中尝试通过Hybrid的方式开发客户端程序,来尽量降低由于程序业务逻辑或者显示界面的改变而来的升级困扰。Hybrid的方式就是本地代码和HTML5应用相结合的方式,其中本地代码负责和底层...
  • mydeman
  • mydeman
  • 2013年09月17日 12:24
  • 14097

html5清空画布方法

总结以下三种清空canvas画布的方式: 1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空: function clearCanvas() ...
  • u010484625
  • u010484625
  • 2015年05月27日 14:16
  • 21666

HTML5-canvas擦除无效

HTML5-canvas擦除无效 部分安卓手机上会出现canvas内图表重叠,并且清除无效,属于偶现缺陷,非常难以确定其产生原因,比如下图这个样子,第一次绘制的图形没有擦除,导致第二次绘制时出现重影:...
  • yuhk231
  • yuhk231
  • 2017年01月12日 11:51
  • 1826

html5 canvas拓展clearRect()实现圆形区域清理

canvas提供的clearRect(x, y, width, height)方法只能清理出特定位置的矩形区域,以下代码则能实现对圆形区域的清 理,主要是利用计算圆周率时的方法,将整个圆切成一个一个细...
  • xiongqiangwin1314
  • xiongqiangwin1314
  • 2015年09月19日 10:44
  • 3438

HTML5 canvas 制作动画原理

使用HTML5画布能够帮助我们快速实现简单的动画效果,基本原理如下: 每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearRect(0, 0, x, y)...
  • Selina_Chan
  • Selina_Chan
  • 2016年04月11日 17:34
  • 1550

基于html5画布的一个小控件

  • 2013年03月15日 16:07
  • 16KB
  • 下载

html5 画布测试工具

  • 2013年04月09日 09:18
  • 118KB
  • 下载

html5 画布例子

  • 2017年02月06日 20:49
  • 10KB
  • 下载

HTML5 Canvas 画布开发 傻瓜书 (英文版)

  • 2016年09月21日 15:29
  • 16.79MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5画布: clearRect()
举报原因:
原因补充:

(最多只允许输入30个字)