javascript - clearRect 函数不清除 Canvas

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

每次我移动鼠标时，它都应该清除 Canvas ，并绘制一条新线，但它无法正常工作。我试图在不使用 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();
}