画布上的撤消操作不正确

我想在画布上添加撤消功能。但它不能正常工作。画布上的撤消操作不正确

问题 -

让我们说，我有单独绘制3线在画布上，但是当我已经开始做就可以撤消，

第2点击 - 它显示2行

3点击 - 它显示1行

当我开始在画布上再次战平，重绘即所有行，所有三线重画

请检查此fiddle和借鉴它

我下面的代码

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 }

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

来源

2015-11-05 vishal

@TheFourthBird是正确的，你的问题是，你不叫'ctx.beginPath'在mousedown事件。另外，为了取消功能，避免使用'toDataURL'，这是一种非常不合适的方式。相反，你应该保存所有的绘图操作（这里很容易将所有坐标保存在数组中）。 – Kaiido

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

也许在这个小提琴更新的代码是你在找什么：

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

来源

2015-11-05 15:23:32

你不想使用'ctx.closePath（）' – Kaiido

@Kaiido你是对的，我已经更新了小提琴。 –

画布上的撤消操作不正确

回答

相关问题