清除畫布JavaScript

Question

我正在嘗試清除畫布。 我嘗試關閉路徑，但沒有任何改變。 另外，我不太確定ctxBg.close（）; 在正確的地方。
謝謝。

function drawGrid () {
    drawGrid();
    ctxBg.clearRect(0, 0, canvas.width, canvas.height);

    function drawGrid () {
        for (var i = 75; i <= canvasWidth-25; i+= 25) {
            ctxBg.beginPath();
            ctxBg.moveTo(-25 + i,55);
            ctxBg.lineTo(-25 + i, canvasHeight - 55);
            ctxBg.stroke();
}

    for (var i = 25; i <= canvasHeight -75; i+= 25) {
        ctxBg.beginPath();
        ctxBg.moveTo(55,25 + i);
        ctxBg.lineTo(canvasWidth-55, 25 + i);
        ctxBg.stroke();      
    }ctxBg.close();
}

Answer 1

您有drawGrid()函數的兩個定義：

function drawGrid () {
 ...
 function drawGrid () {

您只能有一個。 接下來，在上下文上沒有close()方法，只有closePath() 。 但是，這在這里沒有用。 closePath不會“結束”路徑，而是連接路徑中的第一個點和最后一個點，因此路徑形狀是封閉的。

當然這對於行沒有用，在任何情況下都必須在stroke（）之前調用它。

第三，您正在（嘗試）渲染網格，然后立即將其清除。 這不會在畫布上顯示任何內容。 您需要將這些操作分開。

這是一個建議的解決方案。 有兩個功能，一個用於繪制網格，一個用於清除網格：

 var canvas = document.querySelector("canvas"), canvasWidth = canvas.width, canvasHeight = canvas.height, ctxBg = canvas.getContext("2d"); ctxBg.translate(0.5, 0.5); // just to make the lines sharper function drawGrid() { ctxBg.beginPath(); // this can be placed here for (var i = 75; i <= canvasWidth - 25; i += 25) { ctxBg.moveTo(-25 + i, 55); ctxBg.lineTo(-25 + i, canvasHeight - 55); } for (var i = 25; i <= canvasHeight - 75; i += 25) { ctxBg.moveTo(55, 25 + i); ctxBg.lineTo(canvasWidth - 55, 25 + i); } ctxBg.stroke(); // stroke all at once // remove button code (ref. comments) var button = document.querySelector("button"); button.parentNode.removeChild(button); } function clearGrid() { ctxBg.clearRect(0, 0, canvas.width, canvas.height); } 

 <button onclick="drawGrid()">Grid</button> <button onclick="clearGrid()">Clear</button><br> <canvas></canvas> 

更新：如果需要刪除的按鈕是上面示例中的HTML按鈕，請使用以下樣式之一將其刪除：

// assumes the button element is stored in variable button:
button.style.display = "none";

或完全使用其parentNode和removeChild() ：

button.parentNode.removeChild(button);

Answer 2

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

這將清除您的畫布。