HTML5 Canvas drawImage僅在第二次刷新後繪製

好的，我有一個HTML5畫布...並且它從.png瓷磚（32x32）中繪製圖像。有用。有點。它僅在第二次刷新後繪製在畫布上。例如，如果你要加載它......你會看到一個紅色的畫布（#canvas的背景爲紅色），那麼如果你要刷新它......它會成功地畫出圖像......爲什麼就是它？HTML5 Canvas 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

您需要在圖像上添加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

這是非常有用的 - 謝謝你。 – 2014-09-02 16:57:57

HTML5 Canvas drawImage僅在第二次刷新後繪製

回答

相關問題