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不会＆＃34;结束＆＃34;路径，但连接路径中的第一个和最后一个点，以便关闭路径 shape 。

当然，这对于行无效，并且无论如何，必须在stroke（）之前调用它。

第三，您（尝试）渲染网格然后立即清除它。这不会在画布上显示任何内容。您需要将这些操作分开。

这是一个建议的解决方案。两个函数，一个用于绘制网格，一个用于清除它：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

更新：如果需要删除的按钮是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);

这会清除你的画布。

清除画布JavaScript

2 个答案: