HTML 参考手册

HTML 标签大全

HTML canvas clearRect() 方法

clearRect() 是 Canvas 2D API 设置指定矩形区域内（以点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。

在线示例

清除给定矩形内的矩形：

示例

!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　clearRect()　方法的使用(基础教程网　oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
您的浏览器不支持　HTML5　canvas　标签。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);
</script>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome and Safari support clearRect() Method.

Note:Internet Explorer 8 Previous versions do not support the <canvas> element.

Definition and Usage

The clearRect() method clears the specified pixels within the given rectangle.

JavaScript Syntax:	context.clearRect(x,y,width,height);

Parameter Value

Parameter	Description
x	x-coordinate of the top-left corner of the rectangle to be cleared.
y	y-coordinate of the top-left corner of the rectangle to be cleared.
width	Width of the rectangle to be cleared, in pixels.
height	Height of the rectangle to be cleared, in pixels.

HTML canvas Reference Manual

HTML: <template> Tag