clearRect函数不会清除画布。

12 浏览
0 Comments

clearRect函数不会清除画布。

我正在使用这段代码在onmousemove函数中：

function lineDraw() {
    // 获取画布和上下文：
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    // 清除上一次的画布
    context.clearRect(0, 0, canvas.width, canvas.height);
    // 绘制线条：
    context.moveTo(0, 0);
    context.lineTo(event.clientX, event.clientY);
    context.stroke();
}

每次我移动鼠标时，它应该清除画布并绘制一条新线，但它没有正常工作。

我尝试解决这个问题，而不使用jQuery、鼠标监听器或类似的东西。

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

0

3 答案

0 Comments

问题出现的原因是在Google Chrome上，ctx.clearRect()函数不能正确清除画布。相反，它会用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对象正确支持的浏览器上都适用。

0
0 Comments

clearRect function doesn't clear the canvas

当我们使用clearRect()函数来清除画布上的内容时，有时候可能会遇到问题，即清除不完全或者根本不起作用。这个问题的出现原因是因为clearRect()函数只会清除画布上的像素点，而不会清除画布的填充色或背景色。

解决这个问题的方法是，在使用clearRect()函数之前，先使用beginPath()函数来创建一个新的路径，并使用stroke()函数来绘制路径。这样做的目的是将画布的填充色或背景色也包括在清除范围内，从而实现完全清除画布的效果。

下面是一个示例代码：

在这个示例代码中，我们首先使用fillRect()函数来设置画布的填充色或背景色为黑色。然后，我们使用beginPath()函数创建一个新的路径，并使用clearRect()函数清除画布上的内容。最后，我们使用stroke()函数绘制路径，从而清除画布的填充色或背景色。

需要注意的是，在使用clearRect()函数之前，我们需要使用beginPath()函数来创建一个新的路径。这是因为beginPath()函数会将之前的路径清除掉，从而确保我们清除的范围只包括画布的填充色或背景色。

总结起来，当我们使用clearRect()函数清除画布内容时，需要使用beginPath()和stroke()函数来确保清除范围包括画布的填充色或背景色。这样才能实现完全清除画布的效果，解决clearRect function doesn't clear the canvas的问题。

0
0 Comments

问题出现的原因是因为在使用clearRect函数清除画布时，没有使用beginPath函数重新开始一个新的路径。解决方法是在使用clearRect函数前，添加beginPath函数来重新开始一个新的路径。此外，对于绘制方法如rect和arc也是同样的情况，需要在开始绘制前使用beginPath函数。

以下是修改后的代码：

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

在代码中添加了context.beginPath()这一行，即可解决问题。

0