如何清除HTML畫布？

我試圖實現一個清除按鈕，但它似乎並沒有工作。如何清除HTML畫布？

我有一個x，y和拖動位置陣列以及相關的顏色。當按下清除按鈕（這是我一個警告框選中），我清除所有這些陣列，然後清空畫布，像這樣：

clickX.length = 0; 
clickY.length = 0; 
clickDrag.length = 0; 
clickColor.length = 0; 
var context = $('#canvas')[0].getContext('2d'); 
context.width = context.width; 
context.height = context.height;

我聽到設置的寬度和高度可能慢，所以我總是嘗試：

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

但是，這些似乎沒有工作。陣列被清空，但畫布的前面內容仍然停留在那裏。不知道爲什麼他們沒有被清除。

感謝您的閱讀。

來源

2012-06-02 Ryan Peschel

可能重複[如何清除畫布重繪（http://stackoverflow.com/questions/2142535/如何清除畫布重繪） – j08691

var context = $（'canvas'）[0] .getContext（「2d」）; context.clearRect（0，0，300，300）; //試試修復寬度和高度的數字 – glenn

你應該使用的帆布元素，而不是它的背景的.width。

在上下文中沒有.width屬性，因此您的.clearRect調用實際上被最後兩個參數傳遞爲零。

同樣，將新的.width屬性添加到上下文將不會執行任何操作。

只要做到這

var canvas = $('#canvas')[0]; // or document.getElementById('canvas'); 
canvas.width = canvas.width;

如 the specifications（我的強調）描述

：

當畫布元件被創建，並且隨後每當的寬度和高度屬性被設置（是否新值或先前值），位圖和任何關聯的上下文必須清除回到它們的初始狀態，並用新指定的座標spac重新初始化e尺寸。

注意.clearRect()將採取任何剪輯路徑和填充樣式考慮進去，所以設置width屬性是完全復位畫布恢復到原來狀態的唯一途徑。如果你還沒有使用剪切路徑，那麼.clearRect()可能會更快，但！

來源

2012-06-02 19:59:51 Alnitak

謝謝先生，很高興知道。 – thecodeparadox

Alnitak的方法是一種方法，但只是爲了添加更多信息，您應該知道設置寬度還會重置所有畫布狀態。這意味着你將不得不再次設置你的字體，樣式，線寬等。出於性能方面的原因，緩存這些內容可能會很好（除非您絕對必須緩存這些內容（尤其是font，這很慢設置），所以canvas.width = canvas.width並不總是理想的。

當然還有

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

，但這不會幫助你多，如果你有一個複雜的變換矩陣。如果是這樣的話，你隨時都可以臨時通過執行以下操作重置變換矩陣：的

// I have lots of transforms right now 
ctx.save(); 
ctx.setTransform(1, 0, 0, 1, 0, 0); 
// Will always clear the right space 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.restore(); 
// Still have my old transforms

來源

2012-06-02 22:12:20

如何清除HTML畫布？

回答

相關問題