HTML5多笔画

Question

所以我用HTML5完成了我的第一场比赛...... Snake！呜呜！ （经过4天的工作，我可以补充一下）。

这一切都很有效，但我最后还有一件事我一直试图修复，而我似乎无法弄清楚这个问题。

我有一个drawButton函数，如下所示：

function drawButton(x,y,width,height,string,event){
    xCenterButton=x+(width/2);
    yCenterButton=y+(height/2);

    ctx.fillStyle="rgba(242,255,195,1)";
    ctx.fillRect(x,y,width,height);

    ctx.rect(x,y,width,height);
    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.stroke();

    ctx.font="25px Arial";

    fontSize = getFontSize();
    centerNum = fontSize/4;

    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText(string,xCenterButton,yCenterButton+centerNum);

    buttonPos.push([[x],[y],[x+width],[y+height],[event]]);
};

当我启动主菜单时它很好：

function menuStart(){
    clear();
    drawButton(getCenterX(100),getCenterY(50),100,50,"Start",0);
};

然而，它在我的后期游戏菜单中创建了两个笔画，但代码几乎完全相同：

function pgStart(){
    clear();

    ctx.font="25px Arial";
    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText('GAME OVER',canvWidth/2,canvHeight/2-30);

    ctx.font="25px Arial";
    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText('SCORE: '+score,canvWidth/2,canvHeight/2);

    drawButton(getCenterX(100),getCenterY(50)+35,100,50,"Re-Start",1);
};

查看jsFiddle：http://jsfiddle.net/cDFBj/ 玩游戏，当你死的时候，你会明白我的意思。

提前干杯。

Answer 1

非常特殊的问题，它似乎保存了第一个调用的状态并再次绘制它，即使没有命令这样做...

一种选择是将文本向上移动并使用原始坐标，但这样可以避免问题，而不是解决问题。 Demo for that

ctx.fillText('GAME OVER',canvWidth/2,canvHeight/2-60);
// ...
ctx.fillText('SCORE: '+score,canvWidth/2,canvHeight/2 - 30);
drawButton(getCenterX(100),getCenterY(50),100,50,"Re-Start",0);

我尝试使用ctx.save()和ctx.restore()修正此问题，评论除.rect行以外的所有内容，评论.rect行以及其他修正，但似乎没有人工作。它仍然会记住旧盒子的位置，并且当它不应该

时再次绘制它们

我能提出修复的唯一方法是改为使用两个.fillRect，如下所示。这根本不会增加处理量并带走不需要的魔法盒

function drawButton(x,y,width,height,string,event){
    xCenterButton= x + (width/2);
    yCenterButton= y + (height/2);

    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.fillRect(x-1,y-1,width+2,height+2);     

    ctx.fillStyle="rgba(242,255,195,1)";
    ctx.fillRect(x,y,width,height);

    ctx.font="25px Arial";

    fontSize = getFontSize();
    centerNum = fontSize/4;

    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText(string,xCenterButton,yCenterButton+centerNum);

    buttonPos.push([[x],[y],[x+width],[y+height],[event]]);
};

Demo of that here

在旁注上，在case 1下的function checkGamestate(s)下，您应该break;，而不是breakl;