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

每次我移动鼠标时都应该清除画布，然后画一条新线，但它不能正常工作。我试图在不使用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（）在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对象提供适当支持的所有浏览器上都可以使用。

Answer 3

还有我们需要用到的beginPath()和stroke()。此代码与 clearRect(...) 的工作方式相同

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

Answer 4

尝试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函数不会清除画布

4 个答案: