0

setupCanvas.Draw();メソッドを呼び出して長方形を描画したいと思います。

そして、何らかの理由で、scopDemojsfiddleDraw();から関数を呼び出すことができませんgame.setupCanvas(); 

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 に答える