0

HTML5キャンバス上のボードゲームである戦艦を作成しています。ページの読み込み時に船の画像の読み込みに問題があります。どういうわけか、船の画像は画面のどこかをクリックしたときにのみ表示されます。

背景情報：

1.私は2つのキャンバス要素を持っており、それぞれに2つのコンテキストがあります

2. PlayerGrid.jsをOpponentGrid.jsの前に置くと、画面をクリックして船を表示する必要があります。

3. Draw（）は、グリッドと、createShips（）から作成された画像を描画するものです。createships（）は、単に異なる船のオブジェクトを作成し、各オブジェクトに画像を割り当てます。

4.多くの場所、onload、およびcreateShips（）でDRAW（）を呼び出してみますが、それでも表示されません。

誰かがそれが何であるか知っていますか？それは文脈やキャンバスの対立ですか？船の画像は、PlayerGrid.jsの前にOpponentGrid.jsを配置すると表示されますが、XMLHttpRequestには解決する価値のない大きな問題があります。

すべてがロードされた後、他にどのようにDrawメソッドを呼び出す必要がありますか？Battleship.htmlの最後のどこかでDraw（）を呼び出す必要がありますか？

4

1 に答える 1

1

使用する前にすべての画像が読み込まれていることを確認する方法は次のとおりです

コードとフィドル： http： //jsfiddle.net/m1erickson/nD5jr/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

  var canvas1=document.getElementById("canvas1");
  var ctx1=canvas1.getContext("2d");
  var canvas2=document.getElementById("canvas2");
  var ctx2=canvas2.getContext("2d");

  var imageURLs=[];
  var imagesOK=0;
  var imagesFailed=0;
  var imgs=[];
  imageURLs.push("http://upload.wikimedia.org/wikipedia/commons/d/d4/New_York_City_at_night_HDR_edit1.jpg");
  imageURLs.push("http://www.freebestwallpapers.info/bulkupload//20082010//Places/future-city.jpg");
  loadAllImages();

  function loadAllImages(){
      for (var i = 0; i < imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = onLoad; 
        img.onerror = onFail;
        img.src = imageURLs[i];
      }      
  }

  var imagesAllLoaded = function() {
    if (imagesOK+imagesFailed==imageURLs.length ) {

       // ALL IMAGES ARE NOW PROCESSED
       // ready to use loaded images
       // ready to handle failed image loads

       ctx1.drawImage(imgs[0],0,0,canvas1.width,canvas1.height);
       ctx2.drawImage(imgs[1],0,0,canvas2.width,canvas2.height);

    }
  };

  function onLoad() {
    imagesOK++;
    imagesAllLoaded();
  }

  function onFail() {
    // possibly log which images failed to load
    imagesFailed++;
    imagesAllLoaded();
  };   


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas1" width=300 height=300></canvas><br/>
    <canvas id="canvas2" width=300 height=300></canvas>
</body>
</html>
于 2013-03-27T05:41:08.803 に答える