clearRect函数不会清除画布

Question

我在body 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/

Answer 1

您应该使用“ beginPath（） ”。这就对了。function lineDraw() {&nbsp; &nbsp;&nbsp; &nbsp; var canvas=document.getElementById("myCanvas");&nbsp; &nbsp; var context=canvas.getContext("2d");&nbsp; &nbsp; context.clearRect(0, 0, context.width,context.height);&nbsp; &nbsp; context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<&nbsp; &nbsp; context.moveTo(0,0);&nbsp; &nbsp; context.lineTo(event.clientX,event.clientY);&nbsp; &nbsp; context.stroke();}

Answer 2

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