Javascript 矩形不出现在js画布中

我有一个无法解决的严重问题。

JS画布在播放器函数表达式旁边拧成一个矩形。以下是播放器代码：

var menuSwitch = 0;
var pocx = 210;
var pocy = 20;
var switch1;
var lvlSwitch = 1;
var spd = 10;
var mx,my;
var pl = pl();
function pl(){
return{
    draw: function(){
        //draw the player
        ctx.clearRect(0,0,w,h);//clears so the player doesn't "drag"
        ctx.beginPath();
        ctx.fillStyle = 'blue';
        ctx.arc(pocx, pocy, 10, 0, Math.PI*2, true); 
        ctx.closePath();
        ctx.fill();

        //move the player
        if(switch1 == 0){
            pocx = 210;
            pocy = 20;
        }else if(switch1 == 1){
            pocy -= spd;
        }else if(switch1 == 2){
            pocx -= spd;   
        }else if(switch1 == 3){
            pocy += spd;
        }else if(switch1 == 4){
            pocx += spd;
        }

        //rect bounding the player
        if(pocx < 5){//since half of the diameter of the player is 5, the edge of the circle "bounces"
            switch1 = 4;
        }
        if(pocy < 5){
            switch1 = 3;   
        }
        if(pocx > w){
            switch1 = 2;
        }
        if(pocy > h){
            switch1 = 1;
        }
    }
};
}

但是，我将重点放在if语句中

menuSwitch==1

的位置。你可以看到我正在给玩家打电话。玩家出现了，但不是矩形。请帮忙(

有用链接：

Html代码（如果需要）：

---

这是因为您在player函数中调用了

ctx.fillRect（300,20120,20）；

。要修复它，请删除该行并将其添加到绘制函数中，如：

function paint() {
    ctx.clearRect(0, 0, w, h); //clears so the player doesn't "drag"
    //pl.draw();
    if (menuSwitch == 0) {
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, w, h);
        ctx.fillStyle = 'skyblue';
        ctx.fillRect(20, 20, 380, 50);
        ctx.font = 'normal 30pt Arial';
        ctx.fillStyle = 'lime';
        ctx.fillText("Math Path", 105, 60);
        ctx.fillStyle = 'skyblue';
        ctx.fillRect(105, 150, 210, 25); //105+210=315
        ctx.font = 'normal 15pt Arial';
        ctx.fillStyle = 'lime';
        ctx.fillText("Start", 170, 170);
    }
    if (menuSwitch == 1) {
        ctx.fillStyle = 'blue';
        pl.draw();
        ctx.fillRect(300, 20, 120, 20);
    }
}

小提琴示范：

function paint() {
    ctx.clearRect(0, 0, w, h); //clears so the player doesn't "drag"
    //pl.draw();
    if (menuSwitch == 0) {
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, w, h);
        ctx.fillStyle = 'skyblue';
        ctx.fillRect(20, 20, 380, 50);
        ctx.font = 'normal 30pt Arial';
        ctx.fillStyle = 'lime';
        ctx.fillText("Math Path", 105, 60);
        ctx.fillStyle = 'skyblue';
        ctx.fillRect(105, 150, 210, 25); //105+210=315
        ctx.font = 'normal 15pt Arial';
        ctx.fillStyle = 'lime';
        ctx.fillText("Start", 170, 170);
    }
    if (menuSwitch == 1) {
        ctx.fillStyle = 'blue';
        pl.draw();
        ctx.fillRect(300, 20, 120, 20);
    }
}