javascript - canvas清除 - clearrect




如何清除畫布以進行重繪 (12)

使用: context.clearRect(0, 0, canvas.width, canvas.height);

這是清除整個畫布的最快和最具描述性的方式。

不要使用: canvas.width = canvas.width;

重置canvas.width重置所有畫布狀態(例如,轉換,lineWidth,strokeStyle等),它非常緩慢(與clearRect相比),它不適用於所有瀏覽器,並且它不會描述實際嘗試的內容去做。

處理轉換後的坐標

如果修改了變換矩陣(例如使用scalerotatetranslate ),則context.clearRect(0,0,canvas.width,canvas.height)可能不會清除畫布的整個可見部分。

解決方案? 在清除畫布之前重置轉換矩陣:

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

編輯:我剛剛完成了一些分析,並且(在Chrome中)在不重置變換的情況下清除300x150(默認大小)畫布的速度大約快10%。 隨著畫布尺寸的增加,這種差異會減小。

這已經相對微不足道了,但是在大多數情況下,你會比你清理的要多得多,我相信這種性能差異是無關緊要的。

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

在畫布上試驗複合操作和繪製圖像後,我現在試圖去除圖像和合成。 我該怎麼做呢?

我需要清除畫布以重繪其他圖像; 這可能會持續一段時間,所以我不認為每次繪製新的矩形都是最有效的選擇。


一個簡單的,但不是很可讀的方法是寫這個:

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

在webkit中,您需要將寬度設置為不同的值,然後您可以將其設置回初始值


如果你正在畫線,請確保你不要忘記:

context.beginPath();

否則,行不會被清除。


我發現,在我測試的所有瀏覽器中,最快的方法是實際填充白色或任何你想要的顏色。 我有一個非常大的顯示器,在全屏模式下,clearRect的速度很慢,但fillRect是合理的。

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

缺點是畫布不再透明。


最快的方式:

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

這在chart.js中適用於我的pieChart

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

這裡有很多很好的答案。 還有一點需要注意的是,有時部分清除畫布很有意思。 即“淡出”前一張圖像,而不是完全刪除它。 這可以給予不錯的效果。

這很容易。 假設你的背景顏色是白色的:

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

Context.clearRect(starting width, starting height, ending width, ending height);

例如: context.clearRect(0, 0, canvas.width, canvas.height);


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

context.clearRect(0, 0, canvas.width, canvas.height);

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

  • Chrome響應良好: context.clearRect ( x , y , w , h ); 正如@ Pentium10所建議的那樣,但是IE9似乎完全忽略了這條指令。
  • IE9似乎回應: canvas.width = canvas.width; 但它不會清除線條,只是形狀,圖片和其他物體,除非您還使用@John Allsopp的首先更改寬度的解決方案。

所以如果你有一個像這樣創建的畫布和上下文:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

你可以使用這樣的方法:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}




composite