0

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

由于某种原因，我无法Draw();从 scop 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();

​

非常感谢

4

2 回答 2

2

您需要创建一个新实例：

var x = new game.setupCanvas();

x.Draw();

另外，这部分是错误的：

 };
}(); // <--

game.setupCanvas.Draw();

您正在立即调用该函数，这是您不应该这样做的。它返回undefined到game.setupCanvas。把它拿走，你的代码应该可以工作。

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

jsFiddle 演示

于 2013-01-01T20:08:52.327 回答
0

您的分配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/的更新

于 2013-01-01T20:19:59.723 回答