Question

我正在尝试在画布上绘制矩形，用户点击地点并移动鼠标，将绘制矩形，当它只完成一个矩形时，其中一个是矩形。但是使用

let canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d");
canvas.addEventListener("mousedown",function(event){
    x_ = event.pageX - this.offsetLeft;
    y_ = event.pageY - this.offsetTop;  
    canvas.addEventListener("mousemove",function(event){
        xmax = event.pageX - this.offsetLeft;
        ymax = event.pageY - this.offsetTop;
        console.log(x_,y_,xmax,ymax);
        ctx.clearRect(0,0,canvas.width,canvas.height)
        ctx.fillRect(0, 0, 10, 10);
        ctx.rect(x_,y_,xmax-x_,ymax-y_);
        ctx.stroke()
    })
})

canvas {
border: 1px solid black;
}

<canvas></canvas>

Fiddle

clearRect调用不起作用，因为之前的矩形仍然可见。

没有理由不工作，为什么它会以这种方式运作？清除矩形后，将绘制新图像，并且所有先前的矩形都将消失。

Answer 1

我看到你最后打电话给stroke()，这可能就是问题所在。点击此处的“使用说明”：

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect

clearRect的一个常见问题是，如果不正确使用路径，它可能看起来不起作用。 在调用clearRect之后开始绘制新帧之前，不要忘记调用beginPath（）。

Answer 2

尝试：在致电beginPath()后使用clearRect()。

    [...]
    console.log(x_,y_,xmax,ymax);
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.fillRect(0, 0, 10, 10);
    [...]

Answer 3

添加对象以维护状态。您的代码只是堆叠事件侦听器并创建一个单一的形状。我们使用context.beginPath()来建议新的形状。

＆＃13;

let canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"),
mouse = { 
mousedown: false,
x: 0,
y: 0
}
canvas.addEventListener("mousedown",function(event){
    mouse.x = event.pageX - this.offsetLeft;
    mouse.y = event.pageY - this.offsetTop;  
    mouse.mousedown = true;
})
canvas.addEventListener("mouseup mouseleave",function(event){

    mouse.mousedown = false;
})
    canvas.addEventListener("mousemove",function(event){
        xmax = event.pageX - this.offsetLeft;
        ymax = event.pageY - this.offsetTop;

        ctx.clearRect(0,0,canvas.width,canvas.height)
        
        if(mouse.mousedown) {
        ctx.fillRect(0, 0, 10, 10);
        ctx.beginPath();
        ctx.rect(mouse.x, mouse.y, xmax-mouse.x,ymax-mouse.y);
        ctx.stroke()
        }
    })

＆＃13;

canvas {
border: 1px solid black;
}

＆＃13;

<canvas></canvas>

＆＃13;

clearRect不会清除画布

3 个答案: