HTML5キャンバスdrawImageは、2回目のリフレッシュ後に描画されます。

いいえ、私はHTML5キャンバスを持っています... .pngタイル（32x32）から画像を描画します。できます。並べ替え2回目のリフレッシュ後にキャンバスに描画されます。例えば、あなたがそれを読み込んでいたら···赤いキャンバスが表示されます（#canvasの背景は赤です）、それをリフレッシュするなら、イメージをうまく描くことができます...なぜですかそれは？HTML5キャンバスdrawImageは、2回目のリフレッシュ後に描画されます。

ここにコードがあります。（。必要なのはline_tilesフォルダ内の二つの画像t0.pngとt1.pngである）しかし、私はすぐに私はできないとエラーを発見することができます確信している：P

game.js

// HTML5 JS Tile Example 
var canvas, context, board, imageObj, tiles; 
var currentMap = 1; 
var upMap = 0; 
var rightMap = 0; 
var leftMap = 0; 
var downMap = 3; 
var NUM_OF_TILES = 1; // starting from ZERO 

// Set return 2D array of map 
function loadMap(map) { 
    if (map == 1) { 
     return [ 
     [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]; 
    } 
} 

// On load... 
window.onload = function() { 
    canvas = document.getElementById("canvas"); 
    context = canvas.getContext("2d"); 
    imageObj = new Image(); 
    tiles = []; 
    board = loadMap(1); 

    canvas.width = 512; 
    canvas.height = 352; 

    // 2. SET UP THE MAP TILES 
    for (x = 0; x <= NUM_OF_TILES; x++) { 
     imageObj = new Image(); // new instance for each image 
     imageObj.src = "line_tile/t" + x + ".png"; 
     tiles.push(imageObj); 
    } 
    var theX; 
    var theY; 
    // 3. DRAW MAP BY ROWS AND COLS 
    for (x = 0; x <= 10; x++) { 
     for (y = 0; y <= 15; y++) { 

      theX = x * 32; 
      theY = y * 32; 
      context.drawImage(tiles[board[x][y]], theY, theX, 32, 32); 
     } 
    } 
};

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    <title>HTML5</title> 

    <script type="text/javascript" src="game.js"></script> 
    <style type="text/css"> 
<!-- 
#canvas { 
     background:red; 
     z-index:0; 
     position:relative;  
    } 

.container { 
    width: 512px; 
    position: relative; 
} 
--> 
</style> 
</head> 
<body> 
<div class="container"> 
<canvas id="canvas"></canvas> 
</div> 
</body> 
</html>

出典

2012-04-25 nn2

イメージ（タイル）にonloadフックを追加し、すべてのイメージがロードされたときにのみ描画する必要があります。

// HTML5 JS Tile Example 
var canvas, context, board, imageObj, tiles; 
var currentMap = 1; 
var upMap = 0; 
var rightMap = 0; 
var leftMap = 0; 
var downMap = 3; 
var NUM_OF_TILES = 1; // starting from ZERO 

// Set return 2D array of map 
function loadMap(map) { 
    if (map == 1) { 
     return [ 
     [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]; 
    } 
} 


// On load... 
window.onload = function() { 
    canvas = document.getElementById("canvas"); 
    context = canvas.getContext("2d"); 
    imageObj = new Image(); 
    tiles = []; 
    board = loadMap(1); 

    canvas.width = 512; 
    canvas.height = 352; 

    var draw = function() { 
     var theX; 
     var theY; 
     // 3. DRAW MAP BY ROWS AND COLS 
     for (x = 0; x <= 10; x++) { 
      for (y = 0; y <= 15; y++) { 

       theX = x * 32; 
       theY = y * 32; 
       context.drawImage(tiles[board[x][y]], theY, theX, 32, 32); 
      } 
     } 
    } 

    var loadedImagesCount = 0; 

    // 2. SET UP THE MAP TILES 
    for (x = 0; x <= NUM_OF_TILES; x++) { 
     var imageObj = new Image(); // new instance for each image 
     imageObj.src = "line_tile/t" + x + ".png"; 
     imageObj.onload = function() { 
      loadedImagesCount++; 
      if (loadedImagesCount==NUM_OF_TILES) draw(); 
     }; 
     tiles.push(imageObj); 
    } 

};

そして、varキーワードを忘れないように注意してください（ループを見て）：ここで

は提案です。

出典

2012-04-25 18:59:34

これは非常に便利です - ありがとうございます。 –

HTML5キャンバスdrawImageは、2回目のリフレッシュ後に描画されます。

答えて

関連する問題