HTML5 Canvas 清除画布

html5 Canvas clearRect()的使用 方法 ，2D上下文 功能 clearRect()用于清除画布的矩形。清除的矩形变为透明。

在线示例

2D上下文 功能 clearRect()用于清除画布的矩形。清除的矩形变为透明。这是 一个 代码 示例:

示例

<canvas?id="ex1"?width="500"?height="150"?style="border:?1px?solid?#cccccc;">????html5?Canvas?not?supported????
</canvas>????
<script>????var?canvas??=?document.getElementById("ex1");????var?context?=?canvas.getContext("2d");????
context.fillStyle?=?"#ff0000";????
context.fillRect(10,10,?100,100);????
context. stroke Style?=?"#0000ff";????
context. stroke Rect(30,20,?120,?110);????
context.clearRect(50,?30,?110,?35);?????????
</script>

请注意，现在如何清除红色和蓝色矩形中的矩形。
如前所述，清除的使用clearRect()区域变为透明。如果canvas元素已放置在另 一个 元素的顶部，则该元素的 内容 将通过清除区域可见。

clearRect(x,y,width,height)

就像绘制矩形一样，传递给的4个参数clearRect()表示要清除的矩形的 左上角 ，以及要清除的矩形的宽度和高度。
这是 一个 更明确的示例：

var?x?=?50;
var?y?=?30;
var?width??=?110;
var?height?=?25;
context.clearRect(x,?y,?width,?height);

HTML5 Canvas 路径 ? ?HTML5 Canvas 绘制矩形

查看更多关于HTML5 Canvas 清除画布的详细内容...