2

jsキャンバス要素に画像を添付するための Web ページに2 つの関数 ( ) があります。

 function attachImage(tile, x, y)
    {
      base_image = new Image();
      base_image.src = 'Images/tiles/'+(tile-1)+'.png';
      base_image.onload = function(){
        context.drawImage(base_image, 32*x,32*y);
      }
    }

そして、私は文字通りそれをコピーして貼り付け、別のキャンバスに複製しました

  function attachImage2(tile2, x2, y2)
    {
        base_image2 = new Image();
        base_image2.src = 'Images/tiles/'+(tile2-1)+'.png';
        base_image2.onLoad = function(){
            context2.drawImage(base_image2, 32*x2,32*y2);
      }
    }

Firefox では、一方onloadと他方を作成すると、onLoad正常に動作します。しかし、クロムに対して何をしても、画像が正しく読み込まれません。

編集：ここに、FirefoxとChromeの画像比較があります：

ファイアフォックス: http://imgur.com/JaEgy

クローム: http://imgur.com/VJc6q

4

1 に答える 1

5

onload（小文字）を使用する必要があります。

いくつかの一般的な注意事項

  • ローカル変数が必要な場合は、を使用しますvar。
  • onload実際に設定する前に設定する必要があります。srcそうしないと（キャッシュされた）画像onloadが呼び出されない可能性があるためです。
  • メソッドは同じことを行うので、1つだけを使用し、コンテキストをパラメーターとして渡す必要があります

それで

<script>
var canvas = document.getElementById('map');
context = canvas.getContext('2d');

var canvas2 = document.getElementById('map2');
context2 = canvas2.getContext('2d');

function attachImage(tile, x, y, canvasContext)
{
  var base_image = new Image();
  base_image.onload = function(){
    canvasContext.drawImage(base_image, 32*x,32*y);
  }
  base_image.src = 'Images/tiles/'+(tile-1)+'.png';
}
</script>

script呼び出しごとにタグを作成しないでください

<?php
echo("<script>");
for($tr = 0; $tr < count($mapArray)-1; $tr++) {
    for($tc = 0; $tc < count($mapArray[$tr])-1; $tc++) {
        $tile = $mapArray[$tr][$tc];
        echo "attachImage(" . $tile . "," . $tc . "," . $tr . ",context);";
    }
}

for($tr = 0; $tr < count($mapArrayy)-1; $tr++) {
    for($tc = 0; $tc < count($mapArrayy[$tr])-1; $tc++) {
        if($mapArrayy[$tr][$tc]!=0){
            echo "attachImage(" . $mapArrayy[$tr][$tc]. "," . $tc . "," . $tr . ",context2);";
        }
    }
}
echo("</script>");
?>
于 2012-10-29T03:16:29.607 に答える