HTML5 Холст drawImage только рисует после второго обновления

ОК, у меня есть холст HTML5 ... и он рисует изображения с .png плит (32x32). Оно работает. Вроде. Он только рисует на холсте после второго обновления. Например, если вы должны были загрузить его ... al вы увидите красное полотно (фон для #canvas красный), то если бы вы его обновили ... он бы успешно рисовал изображения ... почему в том, что?HTML5 Холст drawImage только рисует после второго обновления

Вот код. (Все, что вам нужно, это два изображения t0.png и t1.png в line_tiles папке.) Но я уверен, что вы можете обнаружить ошибку сразу, что я не могу: 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

Вам нужно добавить на свои изображения крючки на изображения (плитки) и нарисовать только при загрузке всех изображений.

Вот предложение:

// 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); 
    } 

};

И будьте осторожны, чтобы не забыть УАК ключевое слово (смотреть на петлю).

источник

2012-04-25 18:59:34

Это очень полезно - спасибо. –

HTML5 Холст drawImage только рисует после второго обновления

ответ

Смежные вопросы