畫布上的撤消操作不正確

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

問題 -

讓我們說，我有單獨繪製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你是對的，我已經更新了小提琴。 –

畫布上的撤消操作不正確

回答

相關問題