0

jQuery を使用してアプリケーションを作成するのは初めてですが、Javascript には精通しています。さて、私がやろうとしているのは、html5 キャンバスに画像を描画するために Javascript getElementById を使用することです。私のコードは次のとおりです。

jQuery と JQuery モバイルを含めます。

    <link rel="stylesheet" type="text/css" href="lib/jquery.mobile-1.0b1.min.css" />
    <script type="text/javascript" src="lib/jquery-1.6.1.js"></script>  
    <script type="text/javascript" src="lib/jquery.mobile-1.0b1.min.js"></script>

問題のあるコード:

     <div data-role="content">
      <!--//TO DO canvas drawing-->
      <canvas id="draw_area" width="295px" height = "390px"></canvas>
      ...

      <script type="text/javascript">
      var canvas = getElementById("draw_area");
      var context = canvas.getContext('2d');
      var map = new Image();

      map.src = "./imgs/home_screen1.png";
      map.onload = function (){
          context.drawImage (map, 0, 0);
      };
 </script>

また、使用できないことに気付きました

<body onload = "aFunction();">

「onclick」のような他の Javascript イベントではありません。

私は何か間違ったことをしていますか？

4

2 に答える 2

3

それは次のようになります。

var canvas = document.getElementById("draw_area");

スクリプトは、getElementByIdロードされるとすぐに行を実行しますが、これは失敗し ( が見つからないためdocument.)、ページの残りの部分のスクリプトが実行できなくなります。

これは、スクリプト エラーによって後続の行の実行がどのように妨げられるかを示す簡単なデモです。

@swalkが言うように、それが修正されたら、そのスクリプトをカプセル化してdocument.ready、物事を整理して実行できるようにする必要があります。

于 2011-07-14T00:59:02.987 に答える
2

jQuery の dom ready 関数を使用していないためだと思われます。DOM を操作/アクセスする JavaScript は、DOM の準備が整った後に実行する必要があります。これは問題ではありませんが、JavaScript や jQuery を初めて使用する場合によくある問題です。

ほとんどの jQuery コードは、通常、この準備が整った関数 ( http://api.jquery.com/ready/ ) 内にあります。

たとえば、コードは次のようになります。

<script type="text/javascript">
$(document).ready(function() {
  var canvas = getElementById("draw_area");
  var context = canvas.getContext('2d');
  var map = new Image();

  map.src = "./imgs/home_screen1.png";
  map.onload = function (){
    context.drawImage (map, 0, 0);
  };
});
</script>
于 2011-07-14T01:00:26.440 に答える