jQuery-私に説明してください。閉鎖、可変コンテキスト

だから、Firefoxがなぜ$（ "＃canvas"）[0] .getContext（ '2d'）;と言っているのか分かりません。定義されていません。私はすべての関数がそれにアクセスできるように関数から抜き出していますが、ここではctxは未定義です。私は無名の関数にCTXの位置を転送するときjQuery-私に説明してください。閉鎖、可変コンテキスト

(function($) { 
     // Undefined 
     var ctx = $('#canvas')[0].getContext("2d"); 
     var x = 150; 
     var y = 150; 
     var dx = 2; 
     var dy = 4; 
     $(function() { 
      setInterval(draw, 10); 
     }) 
     function draw() { 
      ctx.clearRect(0,0,300,300); 
      ctx.beginPath(); 
      ctx.arc(x,y,10,0,Math.PI*2,true); 
      ctx.closePath(); 
      ctx.fill(); 
      x+=dx; 
      y+=dy; 
     } 
    })(jQuery);

はしかし、CTXは未定義されていません。

(function($) { 
     var ctx; 
     var x = 150; 
     var y = 150; 
     var dx = 2; 
     var dy = 4; 
     $(function() { 
       //Not Undefined 
      ctx = $("#canvas")[0].getContext('2d'); 
      setInterval(draw, 10); 
     }) 
     function draw() { 
      ctx.clearRect(0,0,300,300); 
      ctx.beginPath(); 
      ctx.arc(x,y,10,0,Math.PI*2,true); 
      ctx.closePath(); 
      ctx.fill(); 
      x+=dx; 
      y+=dy; 
     } 
    })(jQuery);

いただきました、最初のコードで間違って？私はvar ctxが上に宣言されていることを意味します。それはそれをグローバル変数にします。うーん、私が得たエラーは$（ "＃canvas"）[0]は未定義です。 #canvasにアクセスできないことを意味します。なぜですか？

出典

2009-05-12 rymn

最初の呼び出しでは、実際には、別のコンテキストでDOMがロードされた後にのみ処理されるFunctionオブジェクトを実際に作成しているからです。

ページ内のすべての要素が既に読み込まれているときに匿名関数が呼び出されるため、呼び出し元はjQueryのコア関数となり、そのコンテキストはここでコーディングしているものとはまったく異なります。

私は$()コール内のすべてのものを包むことをお勧めしたいので、これは動作するはずです：

(function($) { 
     $(function() { 
      var ctx = $("#canvas")[0].getContext('2d'); 
      var x = 150; 
      var y = 150; 
      var dx = 2; 
      var dy = 4; 

      setInterval(draw, 10); 

      function draw() { 
        ctx.clearRect(0,0,300,300); 
        ctx.beginPath(); 
        ctx.arc(x,y,10,0,Math.PI*2,true); 
        ctx.closePath(); 
        ctx.fill(); 
        x+=dx; 
        y+=dy; 
      } 
     }); 
})(jQuery);

出典

2009-05-12 04:37:57 Seb

（http://jsbin.com/afuju/edit経由で編集可能）http://jsbin.com/afujuを。最初にキャンバスオブジェクトを取得しようとすると、実際にはまだロードされていないため、最初のキャンバスオブジェクトは機能しません。 –

コールバック内でコードをラップするのは間違いありませんが、コンテキストの問題については間違っています*。問題はおそらく、キャンバスタグが宣言される前にjavascriptコードが実行されていることでしょう。私は私の答えでこれを実証しました。 – brianpeiris

ありがとうございます。私はこのことがうまくいくかどうかを実験していました。私は今それを理解する。 – rymn

私はあなたが問題を間違えたと思います。可変コンテキストを誤解しているのではなく、おそらくキャンバスタグが宣言されている前に、javascript を実行しているとは限りません。

次のコードは、この問題を示しています。「canvasOne is undefined！」というメッセージが表示されます。それが宣言される前にcanvasOneにアクセスしようとしているからです（<canvas>タグの配置に注意してください）。

私はここでホスティングされたデモ作成しました：セブが正しいと言う何

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head> <body> <script> /* The following line of code is run as soon as the browser sees it. Since the "canvasOne" tag is not declared yet, the variable will be undefined. */ var canvasOne = $('#canvasOne')[0]; $(function() { // The following code is run after the whole document has finished loading. if (canvasOne === undefined) { alert('canvasOne is undefined!'); } else { canvasOne.getContext("2d").fillRect(5, 5, 15, 15); } }); </script> <canvas id="canvasOne"></canvas> <canvas id="canvasTwo"></canvas> <script> /* The following line of code is run as soon as the browser sees it. But since the "canvasTwo" tag *is* declared above, the variable will *not* be undefined. */ var canvasTwo = $('#canvasTwo')[0]; $(function() { // The following code is run after the whole document has finished loading. if (canvasTwo === undefined) { alert('canvasTwo is undefined!'); } else { canvasTwo.getContext("2d").fillRect(5, 5, 15, 15); } }); </script> <script> $(function() { /* The following code is run after the whole document has finished loading. Hence, the variable will *not* be undefined even though the "canvasThree" tag appears after the code. */ var canvasThree = $('#canvasThree')[0]; if (canvasThree === undefined) { alert('canvasThree is undefined!'); } else { canvasThree.getContext("2d").fillRect(5, 5, 15, 15); } }); </script> <canvas id="canvasThree"></canvas> </body> </html>

出典

2009-05-12 05:50:48 brianpeiris

ブライアン・ペリスさんありがとう！ – rymn

デモ展開の+1 – Seb

jQuery-私に説明してください。閉鎖、可変コンテキスト

答えて

関連する問題