Canvas清空

一、canvas清空畫布

在使用canvas繪圖時，我們需要使用canvas的清空功能來實現畫布上下文的重置，以便重新繪製圖形。canvas提供了下面這個方法來清空畫布：

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

上面這個方法的作用是清空畫布。其中，clearRect方法是在給定的矩形內清除畫布的方法。它接收四個參數，分別是矩形左上角的x和y坐標，以及矩形的寬度和高度。

二、canvas清空後空白畫不出來

在一些情況下，我們可能會發現在清空canvas後，再繪製圖形時無法正常工作。這是因為canvas默認的背景色為透明，導致在繪製圖形時顏色被清除，如果需要使用其他顏色作為背景色，可以使用以下方法：

context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);

上面的代碼就會以白色作為背景色來清空畫布。

三、canvas清空畫布畫出的圓

在canvas中繪製圓形的方式是使用arc方法。例如，我們可以使用以下代碼繪製一個圓形：

context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.stroke();

上面的代碼描述了如何繪製一個圓形。但是，如果我們在繪製圓形後想要清空畫布，就需要使用之前提到的clearRect方法。這個方法的使用方式和之前討論的一樣。

四、canvas清空畫布再恢復

有時候，我們在繪製圖形之前需要先清空畫布，以確保畫布上沒有之前的繪製內容。但是，在某些情況下，我們需要先繪製一部分圖形，然後再清空畫布，再進行下一步操作。這時候，我們需要保存之前繪製的圖形，以便在清空畫布後再恢復之前的圖形。使用下面的方式可以實現：

// 繪製圖案，保存繪圖狀態
context.save();

// 清空畫布
context.clearRect(0, 0, canvas.width, canvas.height);

// 恢復之前保存的繪圖狀態
context.restore();

在上面的代碼中，我們使用了save和restore方法來保存和恢復繪圖狀態。在save方法之前的任何操作都是上一次的繪製操作，在restore方法之後的任何操作都是下一次的繪製操作。

五、canvas清空畫布重新畫

在使用canvas繪圖時，我們經常會需要重新繪製圖形。有時候，我們需要清空畫布後重新繪製，有時候則不需要。如果需要清空畫布，可以使用clearRect方法，如果不需要，則可以使用beginPath方法。下面的代碼是一個例子：

// 繪製圓形
context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.stroke();

// 繪製矩形
context.beginPath();
context.rect(50, 50, 100, 100);
context.stroke();

// 重新繪製圓形
context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.stroke();

在上面的代碼中，第一次繪製圓形和矩形之後，我們沒有清空畫布，而是繼續繪製了一個圓形。這個圓形會覆蓋之前的圓形，從而達到了重新繪製的效果。

六、canvas清空畫布內容

在canvas中，我們可以使用clearRect方法來清空畫布內容，但是如果我們只想清空部分內容，而不是整個畫布，該怎麼辦呢？這時候，我們可以使用clip方法來限制繪圖區域，然後使用clearRect方法來清空部分繪圖區域。使用如下代碼：

// 設置繪圖區域
context.beginPath();
context.rect(50, 50, 100, 100);
context.clip();

// 清空繪圖區域
context.clearRect(0, 0, canvas.width, canvas.height)

// 恢復繪圖區域
context.restore();

在上面的代碼中，我們首先使用rect方法來定義一個繪圖區域，然後使用clip方法將其限制為繪圖區域，並將其保存為當前繪圖狀態。接下來，我們使用clearRect方法來清空整個畫布，這時候只有繪圖區域內的內容被清空了。最後，我們使用restore方法恢復了之前保存的繪圖狀態，從而取消了clip的限制。

七、canvas清空上一次繪製

在canvas中，我們可以使用clearRect方法來清空整個畫布或者某個部分的內容。有時候，我們還需要清空最近的一次繪製，以便進行下一次繪製。例如，當我們需要實現一個筆刷工具時，就需要清空上一次繪製的路徑，以便重複這一次繪製。可以使用以下代碼來實現：

// 清空上一次繪製
context.globalCompositeOperation = 'destination-out';
context.beginPath();
context.arc(100, 100, 10, 0, 2 * Math.PI, false);
context.fill();
context.globalCompositeOperation = 'source-over';

在上面的代碼中，我們使用globalCompositeOperation屬性來設置繪圖模式為destination-out，這個模式的作用是將新的繪製結果從原來的繪製結果中減去。然後，我們使用beginPath方法來開始一個新的路徑，再用arc方法繪製一個圓形。最後，我們再將繪圖模式還原為source-over，以便進行下一次繪製。

八、canvas如何清空畫布

綜上所述，canvas提供了以下幾種清空畫布的方法：

• 使用clearRect方法清空整個畫布
• 使用fillRect方法以指定顏色填充畫布
• 使用clip方法限制繪圖區域，然後使用clearRect來清空部分內容
• 使用globalCompositeOperation屬性來清除最近一次繪製

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

// 使用clearRect清空畫布
context.clearRect(0, 0, canvas.width, canvas.height);

// 使用fillRect以指定顏色填充畫布
context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);

// 使用clip方法限制繪圖區域，然後使用clearRect來清空部分內容
context.beginPath();
context.rect(50, 50, 100, 100);
context.clip();
context.clearRect(0, 0, canvas.width, canvas.height);
context.restore();

// 使用globalCompositeOperation屬性來清除最近一次繪製
context.globalCompositeOperation = 'destination-out';
context.beginPath();
context.arc(100, 100, 10, 0, 2 * Math.PI, false);
context.fill();
context.globalCompositeOperation = 'source-over';