在画布上撤消无法正常工作

Question

我正在尝试在画布中添加撤消功能。 但是它不能正常工作。

问题 -

假设我在画布上分别绘制了3条线，但是当我开始对其进行撤消操作时，

第二次单击-它显示2行

第三次单击-它显示1行

当我再次开始在画布上绘制时，所有线条均重新绘制，即所有三行都重新绘制

请检查这个小提琴并在上面画画

我的代码如下

的HTML

<canvas id="c" width="500" height="300"></canvas> <input type='button' onClick='undoDrawOnCanvas();' id='btnUndo' value='Undo drawing'>

的CSS

canvas { border: 1px solid #ccc }

JS

var el = document.getElementById('c');
var ctx = el.getContext('2d');
var isDrawing;
var restorePoints = [];

el.onmousedown = function(e) {
    isDrawing = true;
    ctx.lineWidth = 10;
    ctx.lineJoin = ctx.lineCap = 'round';
    ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
    if (isDrawing) {
        ctx.lineTo(e.clientX, e.clientY);
        ctx.stroke();
    }
};
el.onmouseup = function() {
    isDrawing = false;
    saveRestorePoint();
};


function saveRestorePoint() {
    var oCanvas = document.getElementById("c");
    var imgSrc = oCanvas.toDataURL("image/png");
    restorePoints.push(imgSrc);
}


function undoDrawOnCanvas() {
    if (restorePoints.length > 0) {
       var oImg = new Image();
       oImg.onload = function() {
           ctx.clearRect(0, 0, el.width, el.height);            
           ctx.drawImage(oImg, 0, 0);
       }
       oImg.src = restorePoints.pop();
    }
}

Answer 1

我已经将beginPath()添加到onmousedown事件中。

也许此小提琴中的更新代码是您想要的：

https://jsfiddle.net/dc67eaop/4/