Javascript HTML5多笔划

所以我已经完成了我的第一个HTML5游戏。。。蛇！呜呜！（工作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);
};

查看JSFIDLE： 玩完游戏，当你死的时候，你会明白我的意思

---

提前干杯。

非常奇怪的问题，它似乎保存了第一次呼叫的状态并再次绘制它，即使没有命令这样做

一种选择是向上移动文本并使用原始坐标，但这只是避免了问题，而不是解决问题

我尝试使用

ctx.save（）

s和

ctx.restore（）

s来修复这个问题，注释掉了

.rect

行以外的所有内容，注释掉了

.rect

行以及其他修复程序，但似乎都不起作用。它仍然记得旧盒子在哪里，并在不应该的时候再次画出来

我能想出一个解决方案的唯一方法是使用两个

.fillRect

s，如下所示。这不会增加太多的处理，并带走了不需要的魔法盒

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]]);
};

---

另一方面，在

案例1

中，在

函数checkGamestate（s）

下，您应该有

中断，而不是
breakl
这实际上看起来比笔划方法干净得多。太完美了。谢谢你的分手；我完全错过了。
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]]);
};