從堆棧中擦除畫布矩形

Question

我有以下代碼：

var stack = new Array();
var last = 0;
var pospintar=0;

function Cuadrado(pcolor,pcostat){
this.color=pcolor;
this.costat=parseInt(pcostat);
}

function pintar(){
var canvas = document.getElementById('tutorial');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
//ctx.fillStyle="#ff0000";
var vCuadro=stack[last];
ctx.fillStyle=vCuadro.color;
var lado=vCuadro.costat;
ctx.fillRect(20,pospintar,lado,lado);
//ctx.strokeRect(20,posPintar,lado,lado);
}
}

function empilar(color,costat)
{
var vCuadro = new Cuadrado(color,costat);
stack[last]=vCuadro;
pintar();
var vCuadro=stack[last];
var lado=vCuadro.costat;
pospintar+=lado;
last+=1;
}
function desempilar()
{

}

empilar函數繪制與變量costat相同大小的矩形。

如何使相反的函數desempilar刪除最后繪制的矩形？

Answer 1

在pintar功能中，您應該清除畫布，遍歷堆棧數組並繪制每個正方形。 在desempilar函數中，您需要從堆棧中刪除最后一個元素，並將最后一個變量減少1，然后再次調用pintar。

function pintar() {
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,canvas.width,canvas.height); // Clear canvas
        var pospintar = 0;
        for (i in stack) {
            var vCuadro=stack[i];
            ctx.fillStyle=vCuadro.color;
            var lado=vCuadro.costat;
            var pospintar += lado;
            ctx.fillRect(20,pospintar,lado,lado);
        }
   }
}

function desempilar() {
    stack.splice(last, 1);
    last--;
    pintar();
}