javascript - 画布到 URLData 没有调整大小吗？

Question

我有一个问题，当我在页面上单击撤消时，它会使画布调整大小变小？只需转到页面，画一些东西，单击撤消，直到你什么都没有，然后重复，你会看到问题，一切都像调整图像大小一样移动？我认为 currentState 变量一定有问题，但代码在我的脑海中是有意义的，所以我看不出有什么问题，而且我认识的人也没有来校对它。

http://www.taffatech.com/Paint.html 这是我的代码：

    function clearCanvas()
    {
    ctx.clearRect(0,0,canvasWidth,canvasHeight);

    }
   Stack1 = new Stack();
    ///////////////////

    function Stack() {
    var currentState = -1;
    var maxStates = 10;
     var stateArray = [];



currentState++;
var image = new Image();
image.id = "pic";
image.src = canvas.toDataURL();
stateArray.push(image);




    this.add = function() {
    currentState++;
var image = new Image();
image.id = "pic";
image.src = canvas.toDataURL();
stateArray.push(image);

    }


    this.undo = function () {



    if(currentState > 0)
     {
    currentState--;

      //stateArray.pop();
      clearCanvas();
     var image = stateArray[currentState];
      ctx.drawImage(image,0,0);
      }


    }

    this.redo = function () {

    alert("Unfinished");
    //maybe have another array?



    }
} 

Answer 1

单击撤消时必须在数组中弹出当前帧，因为其他明智的数组会在您想要的之后添加一个。

 this.undo = function () {




    if(currentState < 0)
    {
    currentState = 0;
    clearCanvas();
    }
    else(curre

if(currentState >= 0)
 {

 stateArray.pop();
currentState--;


  clearCanvas();
 var image = stateArray[currentState];
  ctx.drawImage(image,0,0);
  }


}

同样对于重做功能，我会将弹出的帧添加到一个新数组中，并在您单击重做时使用它们。不过可能会有点棘手。