javascript - 从堆栈中删除 Canvas 矩形

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 函数中，您应该清除 Canvas ，遍历堆栈数组并绘制每个方 block 。在 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();
}