尝试创建由画布上的按钮单击触发的撤消功能

Question

我现在正在测试（几天前才刚开始进行Web开发），所以我几乎只是从http://www.codicode.com/art/undo_and_redo_to_the_html5_canvas.aspx复制并粘贴了undo功能。 现在，我无法访问完整的源代码，因此我只是在猜测放置位置。

这是我认为与问题相关的代码片段：

var cPushArray = new Array();
var cStep = -1;
var ctx = document.getElementById('canvas').getContext("2d");

function cPush() {
    cStep++;
    if (cStep < cPushArray.length) {
        cPushArray.length = cStep;
    }
    cPushArray.push(document.getElementById('canvas').toDataURL());
}

function cUndo() {
    if (cStep > 0) {
        cStep--;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function() {
            ctx.drawImage(canvasPic, 0, 0);
        }
    }
}

//This draws the dots on the face.   
function drawCoordinates(x, y) {
    var pointSize = 3; // Change according to the size of the point.
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.fillStyle = "#ff2626";
    ctx.beginPath(); //Start path
    ctx.arc(x, y, pointSize, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure.
    ctx.fill(); // Close the path and fill.
    cPush();
}

//count variable keeps track of the flicks
var count = 1;

//this listens for button clicks and displays the elements
document.getElementById('button').onclick = function() {
    document.getElementById(count).style.display = "block";
    count++;
}
document.getElementById('buttonUndo').onclick = function() {
    cUndo();
}

到目前为止，我知道撤消按钮已正确链接的事实，因为当我编写alert("hello")代码时，单击按钮会弹出警报。 但是，撤消功能在代码中什么也没做，我很难弄清为什么这样做的原因以及如何解决它。

Answer 1

问题是需要清除画布。 当您执行ctx.drawImage(canvasPic, 0, 0) ，它的意思是“在画布上的当前内容上方绘制画布的先前状态”。 问题在于先前的画布状态上有透明或空像素。 因此，这就像使用仅带有上次实际绘制的图章的邮票一样。 意味着图章的“空白”部分将不会擦除当前屏幕的任何部分。 您可以通过清除绘图之间的画布来解决此问题。 （我添加了一个随机点函数来显示这一点）：

 var cPushArray = new Array(); var cStep = -1; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext("2d"); // Don't worry about this, I just wrote this for showing random colors function generateColor() { var r = Math.floor(Math.random() * 256).toString(16); var g = Math.floor(Math.random() * 256).toString(16); var b = Math.floor(Math.random() * 256).toString(16); return '#' + r + g + b; } function cPush() { cStep++; if (cStep < cPushArray.length) { cPushArray.length = cStep; } cPushArray.push(document.getElementById('canvas').toDataURL()); } function cUndo() { if (cStep >= 0) { cStep--; // V Clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // ^ Clear the canvas var canvasPic = new Image(); canvasPic.src = cPushArray[cStep]; canvasPic.onload = function() { ctx.drawImage(canvasPic, 0, 0); } } } //This draws the dots on the face. function drawCoordinates(x, y) { var pointSize = 30; // Change according to the size of the point. var ctx = document.getElementById("canvas").getContext("2d"); ctx.fillStyle = generateColor(); ctx.beginPath(); //Start path ctx.arc(x, y, pointSize, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure. ctx.fill(); // Close the path and fill. cPush(); } document.getElementById('buttonUndo').onclick = function() { cUndo(); } document.getElementById('addDot').addEventListener('click', function() { drawCoordinates(Math.random() * canvas.width, Math.random() * canvas.height); }); 

 html, body { background: #222; } canvas { background: #FFF; display: block; margin: 10px auto; } 

 <canvas id="canvas" width="320" height="240"></canvas> <button id="buttonUndo">Undo</button> <button id="addDot">Add Dot</button>