Question

我想调用方法setupCanvas.Draw();来绘制矩形。

由于某些原因，我无法从scop Draw();中调用函数game.setupCanvas(); Demo jsfiddle

window.game = window.game|| {};
game.main = function() {};      
game.setupCanvas = function(){

        var w = $(window).outerWidth();
        var h = $(window).outerHeight();
        myCanvas = document.createElement('canvas');
        document.body.appendChild(myCanvas);
        myCanvas.id     = "playground";
        myCanvas.width  = w * 0.8;
        myCanvas.height = h * 0.8;
        myCanvas.style.left= (w - myCanvas.width )/2 + 'px' ;
        myCanvas.style.top= (h -  myCanvas.height )/2 + 'px' ;     
        myCanvas.style.zIndex   = 10;
        myCanvas.style.position = "absolute";
        myCanvas.style.border   = "1px solid green ";
        this.ctx= $('#playground').get(0).getContext('2d');

       this.Draw  = function(){
         ctx.fillStyle="#0000FF";
         ctx.fillRect(150,75,150,75);
         ctx.fillStyle="#F0F0FF";
         ctx.fillRect(0,0,150,75);
    };
}();    
    game.setupCanvas.Draw();

非常感谢

Answer 1

您需要创建一个新实例：

var x = new game.setupCanvas();

x.Draw();

此外，这部分是错误的：

 };
}(); // <--

game.setupCanvas.Draw();

您正在立即调用该功能，您不应该这样做。它会将undefined返回game.setupCanvas。拿走它，你的代码应该可以工作。

此外，当您在ctx方法中引用Draw属性时，您需要使用this.ctx。

jsFiddle Demo

Answer 2

您对game.setupCanvas的分配无效，因为自调用函数不返回任何内容，因此game.setupCanvas将是未定义的。确保使用这样的公共方法返回一个对象。

return {
    Draw: function(){
      ctx.fillStyle="#0000FF";
      ctx.fillRect(150,75,150,75);
      ctx.fillStyle="#F0F0FF";
      ctx.fillRect(0,0,150,75);
    },
    DrawSomethingElse: function(){
      ctx.fillStyle="#0000FF";
      ctx.fillRect(150,75,150,75);
      ctx.fillStyle="#F0F0FF";
      ctx.fillRect(0,0,150,75);
    }
};

以下是您的小提琴http://jsfiddle.net/dAvtS/11/

的更新

为什么我不能在Javascript命名空间中调用公共函数

2 个答案: