clearRect函数不能清除画布。

Question

我正在使用这个脚本在标签上的onmousemove函数中：

function lineDraw() {
    // Get the context and the canvas:
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    // Clear the last canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Draw the line:
    context.moveTo(0, 0);
    context.lineTo(event.clientX, event.clientY);
    context.stroke();
}

我的意图是每次鼠标移动时清除画布并绘制新的线条，但它未能正常工作。 我正在尝试解决此问题，而不使用jQuery、鼠标监听器或类似的东西。

这里是演示：https://jsfiddle.net/0y4wf31k/

- Carlos Roldán

Answer 1

你应该使用 "beginPath()"。就这样。

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    context.clearRect(0, 0, context.width,context.height);
    context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}

- aviomaksim

---

需要翻译的内容：Would like to add that this goes for draw methods such as rect and arc as well.我想补充一下，这也适用于绘制矩形和弧形等绘图方法。 - MetalGodwin

虽然这段代码有点老，但是 closePath 在这里是无用且误导的，它只是一个 lineTo(previousStartingPointOfThePath)，所以对于单条线来说，它什么也不做，并且根本没有告诉你已经完成了路径声明。 - Kaiido

谢谢@kaiido，我编辑了问题。我认为这个编辑符合答案的精神。希望你不介意aviomaksim。 - aaaidan

谢谢！那太疯狂了，为什么不做beginPath就无法清除呢？这毫无意义。 - John Henckel

Answer 2

请注意，ctx.clearRect() 在 Google Chrome 上无法正常工作。我花费了几个小时来解决相关问题，但在 Chrome 上，它实际上用 rgba(0, 0, 0, 1) 填充矩形，而不是使用 rgba(0, 0, 0, 0)。因此，为了让矩形以所需的透明黑像素填充，您需要在 Chrome 上使用以下方法：

正确地填充矩形，请改用以下方法：

ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(left, top, width, height);

当然，这应该在所有支持HTML5 Canvas对象的浏览器上运行。

- David Edwards

Answer 3

我们需要使用beginPath()和stroke()。这段代码与clearRect(...)的作用相同。

ctx.beginPath();
ctx.fillStyle = "rgba(0, 0, 0, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);    
ctx.stroke();

- user10803259

---

为什么我们需要这个？如果背景是彩色的会怎样？ - B''H Bi'ezras -- Boruch Hashem

Answer 4

如果您使用此方法出现了黑屏问题

ctx.beginPath()
ctx.fillStyle = "rgba(0, 0, 0, 255)"
ctx.fillRect(0, 0, canvas.width, canvas.height)    
ctx.stroke();

然后将 rgba 中所有的 0 替换为 255

ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);    
ctx.stroke();

- SCREENSABER

Answer 5

尝试使用 context.canvas.width = context.canvas.width：

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    //context.clearRect(0, 0, context.width,context.height);
    context.canvas.width = context.canvas.width;
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}

演示 这里

- salih0vicX

---

或者简单地写成 myCanvas.width = myCanvas.width;。 - Sani Huttunen