clearRect 函数不会清除画布

IT技术 javascript line draw onmousemove
2021-02-07 07:24:20

我在 bodyonmousemove函数上使用这个脚本：

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/

4个回答

您应该使用“ 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();
}
想补充一点，这也适用于 rect 和 arc 等绘制方法。
2021-03-15 07:24:20
谢谢！那太疯狂了，为什么除非您执行 a ，否则 clear 会失败beginPath？这个不成立。
2021-04-01 07:24:20
谢谢@kaiido，我编辑了这个问题。我认为编辑本着答案的精神。希望你不介意 aviomaksim
2021-04-07 07:24:20
它很旧但是......closePath在这里是无用的和误导性的，它只是lineTo(previousStartingPointOfThePath)一行的所以，它不会做任何事情，它根本没有告诉你你完成了你的路径声明。
2021-04-11 07:24:20

请注意 ctx.clearRect()在 Google Chrome 上无法正常工作。我花了几个小时试图解决相关的问题，才发现在Chrome，而不是填充RGBA（0，0，0，0）的矩形，它实际上填满了RGBA（0，0，0，1）矩形反而！

因此，为了使用所需的透明黑色像素正确填充矩形，您需要在 Chrome 上执行以下操作：

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

当然，这应该适用于所有为 HTML5 Canvas 对象提供适当支持的浏览器。

还有我们需要用到的 beginPath() 和 stroke() 。此代码的工作原理与 clearRect(...)

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

尝试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();
}

演示在这里

或者干脆myCanvas.width = myCanvas.width;。
2021-04-06 07:24:20
其它你可能感兴趣的问题
上一篇多个顺序 fetch() Promise 下一篇javascript中的utf-8字边界正则表达式