Javascript画布重绘但我看到以前绘制的矩形

Question

我正在尝试在HTML画布上重新绘制矩形，就像我选择一个特定区域一样。

当我移动鼠标指针（同时按下鼠标键）时，我调用redraw清除画布并重新绘制与全局存储坐标对应的矩形。

由于每个鼠标事件都清除了画布，我希望画布中只有一个矩形，但是我的矩形太多了。

这是我的代码：

<canvas id="image" width="0" height="0" style="background-color: orange"></canvas>
<script>
var mousedown = false;
var x1;
var y1;
var x2;
var y2;
document.getElementById("image").onmousedown = function(e) {
    mousedown = true;
    x1 = e.offsetX;
    y1 = e.offsetY;
    console.log(e.offsetX);
    console.log(e.offsetY);
    var canvas = document.getElementById("image")
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
    console.log('clean');
}
document.getElementById("image").onmouseup = function(e){
    mousedown = false;
}
document.getElementById("image").onmousemove = function(e) {
    if (mousedown) {
        x2 = e.offsetX;
        y2 = e.offsetY;
        redraw()
    }
}

function redraw() {
    var canvas = document.getElementById("image")
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.rect(x1, y1, (x2 - x1), (y2 - y1));
    context.stroke();
}
</script>

结果是：

为什么我会得到这么多的矩形？我怎样才能得到最后一个呢？ （或者如何在没有任何库的情况下更有效地完成它？）

Answer 1

您的问题不在clearRect方法上，问题是当您希望在画布上绘制时需要开始路径。

在context.rect（）;

之上添加context.beginPath();

jsFiddle

这里已经回答了一些很好的问题：
clearRect not working

这些文章也非常适合画布操作： http://cheatsheetworld.com/programming/html5-canvas-cheat-sheet/ https://www.w3schools.com/tags/ref_canvas.asp