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() {   

    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();

}

Answer 2

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

}