HTML5画布未清除

Question

我正在尝试使用各种方法清除画布，但是没有成功。一旦我再次单击画布，所有以前的绘图都会重新出现。

这是代码。

function clearCanvas() {

    //clickX = [];
    //clickY = [];
    //clickDrag = [];
    //context.clearRect(0, 0, canvas.width, canvas.height);

    //curColor = colorBlack;
    //redraw();

    //clickX = new Array();
    //clickY = new Array();
    //clickDrag = new Array();

    context.fillStyle = '#faebd7'; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
    canvas.width = canvas.width; 
    //context.beginPath();

};

- Srikar Doddi

---

尝试使用 context.clearRect(0,0,canvas.width,canvas.height)？这个是如何被调用的，确切地说是怎么样的呢？ - Belladonna

我尝试过了，这就是为什么我在代码中包含了所有可能的组合。请查看已注释的代码。该代码从按钮调用以清除画布。 - Srikar Doddi

我认为这不仅仅是你发布的代码的问题。这些方法确实有效。http://codepen.io/thebabydino/pen/tgxLq - Ana

你找到解决方案了吗？如果找到了，请分享一下，我也遇到了同样的问题。谢谢。 - streak

Answer 1

我看到您正在使用数组来存储绘图信息。我注意到您尝试过清除它们，但据我所知，最好的清除方法是将长度设置为零。请尝试以下操作：

function clearCanvas() {
clickX.length = 0;
clickY.length = 0;
clickDrag.length = 0;
context.clearRect(0, 0, canvas.width, canvas.height);
};

- Vivix

---

它清除了画布，但当我选择不同的颜色进行绘制时，直到我画了一段时间后才会选择新的颜色。非常奇怪的行为。 - Srikar Doddi

这是我的颜色选择代码：function setColorWhite() { curColor = colorWhite; redraw(); }; - Srikar Doddi

你如何存储颜色信息？或者改变颜色是否会改变屏幕上所有线条的颜色？因为根据有限的信息，我所想到的是，如果你将颜色存储在一个数组中，并且该数组没有在clearcanvas函数中被清除，它将绘制前100个点作为之前的颜色，并在点用完后切换到新的颜色。 - Vivix

在我的Javascript函数中，我只是将它声明为colorBlack =“＃000000”，clickColor = new Array（）...我也应该重置clickColor吗？ - Srikar Doddi

你是正确的。我没有从redraw()中重置所有的数组。非常感谢。 - Srikar Doddi

Answer 2

如果它没有清除（并且没有错误），那么可能是以下原因之一：

1. 您的 clearCanvas() 方法未被调用，或者
2. 在调用 clearCanvas() 后，您重新绘制了画布。

抱歉，这是我根据可用信息得出的最佳答案 :P

- Jarrod

Answer 3

你说“当我点击画布时”，是指最初画布被清空，直到你点击它？那么对我来说，这意味着你有一个事件处理程序，在单击时重新绘制所有内容。

此外，请验证您的上下文是否仍然指向正确的画布。一些画布解决方法需要创建临时画布。如果您已经这样做了，那么可能清除了错误的上下文。否则，我无法理解为什么context.clearRect不起作用。

- Raptorious Rexotropolis