Question

我正在测试一些事情（几天前刚开始使用Web开发）所以我几乎只是复制并粘贴了http://www.codicode.com/art/undo_and_redo_to_the_html5_canvas.aspx的撤消功能。现在我无法访问完整的源代码，所以我只是猜测放置东西的位置。

以下是我认为与此问题相关的代码片段：

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)时，说“将画布的先前状态绘制在画布上当前的状态”。问题是前一个画布状态上有明显或空的像素。所以这就像使用的邮票上次实际绘制的内容。这意味着图章的“空白”部分不会删除当前屏幕的任何部分。 You can fix this通过在绘图之间清除画布。（我添加了一个随机点函数来显示这个）：

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>

尝试创建一个撤消功能，该功能由画布

1 个答案: