HTML5 Canvas 清除畫(huà)布

HTML5 Canvas clearRect()的使用方法，2D上下文功能clearRect()用于清除畫(huà)布的矩形。清除的矩形變?yōu)橥该鳌?/p>

在線(xiàn)示例

2D上下文功能clearRect()用于清除畫(huà)布的矩形。清除的矩形變?yōu)橥该?。這是一個(gè)代碼示例:

<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.strokeStyle = "#0000ff";    
context.strokeRect(30,20, 120, 110);    
context.clearRect(50, 30, 110, 35);         
</script>

請(qǐng)注意，現(xiàn)在如何清除紅色和藍(lán)色矩形中的矩形。
如前所述，清除的使用clearRect()區(qū)域變?yōu)橥该?。如果canvas元素已放置在另一個(gè)元素的頂部，則該元素的內(nèi)容將通過(guò)清除區(qū)域可見(jiàn)。

clearRect(x, y, width, height)

就像繪制矩形一樣，傳遞給的4個(gè)參數(shù)clearRect()表示要清除的矩形的左上角，以及要清除的矩形的寬度和高度。
這是一個(gè)更明確的示例：

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