HTML5 Canvas 清除画布
HTML5 Canvas clearRect()的使用方法,2D上下文功能clearRect()用于清除画布的矩形。清除的矩形变为透明。
在线示例
2D上下文功能clearRect()用于清除画布的矩形。清除的矩形变为透明。这是一个代码示例:
示例
HTML5Canvasnotsupported
varcanvas=document.getElementById("ex1");
varcontext=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);
测试看看 ‹/›HTML5 Canvas not supported
请注意,现在如何清除红色和蓝色矩形中的矩形。
如前所述,清除的使用clearRect()区域变为透明。如果canvas元素已放置在另一个元素的顶部,则该元素的内容将通过清除区域可见。
clearRect(x, y, width, height)
就像绘制矩形一样,传递给的4个参数clearRect()表示要清除的矩形的左上角,以及要清除的矩形的宽度和高度。
这是一个更明确的示例:varx=50;
vary=30;
varwidth=110;
varheight=25;
context.clearRect(x,y,width,height);