clearRect函数差不多不清除画布(clearRect function doesn't

我使用对身体这个脚本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:

注意，ctx.clearRect（） 不会对谷歌浏览器正常工作。 我花了几个小时试图解决一个相关的问题，才发现在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对象提供适当的支持所有浏览器的工作。

Answer 3:

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

演示HERE

文章来源: clearRect function doesn't clear the canvas