爲什麼我的畫布只將圖片加載到左上角？

我想製作一個能製作視頻遊戲地圖的程序。它之前工作得非常好，但我添加了一個變量pixelWideAndTall來自動設置畫布的寬度和高度，現在它只會將圖像加載到左上角。我只想知道爲什麼會發生這種情況，以及如何解決這個問題。如果您需要查看它，則必須將代碼複製並粘貼到您使用的任何文本編輯器中。我會張貼一張照片，但是我的聲望還不夠高。謝謝！爲什麼我的畫布只將圖片加載到左上角？

<html> 
<head> 
<title></title> 
<script> 
window.onload = function() { 
    var canvas = document.getElementById('paper'); 
    var c = canvas.getContext('2d'); 
    var posX=0;             //All of my variables 
    var posY=0; 
    var pixelWideAndTall = prompt('How wide and tall do you want each picture to be? Make sure it\'s a number, please!'); 
    while(isNaN(pixelWideAndTall)){ 
     pixelWideAndTall = prompt('Alright, put in a number this time.'); 
    } 
    var map = [ 
    [0,0,1,0,0],  //Map 
    [0,0,1,0,0], 
    [1,1,1,1,1], 
    [0,0,1,0,0], 
    [0,0,1,0,0]]; 
    canvas.height = map.length * pixelWideAndTall; 
    canvas.width = map[0].length * pixelWideAndTall; 

    //Now for the pictures! 

    var grass = new Image(); 
    grass.src='https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/v/t1.0-9/10252096_483877768405708_6915128458002047622_n.jpg?oh=0dd45ac8392b31dd89da67f2b74e0eef&oe=53ABDB2A&__gda__=1404253465_7ee03498efb21d7759862a3268769775'; 
    var sand = new Image(); 
    sand.src='https://scontent-b-sea.xx.fbcdn.net/hphotos-prn2/t1.0-9/10169458_483877771739041_423139715070437533_n.jpg'; 
    var logA = new Image(); 
    logA.src='https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc1/t1.0-9/10014648_483877575072394_6204441713213423736_n.jpg'; 
    var logB = new Image(); 
    logB.src='https://scontent-a-sea.xx.fbcdn.net/hphotos-frc1/t1.0-9/10247323_483877578405727_3664131849980667819_n.jpg'; 

    for(var i=0;i<map.length;i++){ 
     for(var j=0;j<map[i].length;j++){ 
      switch(map[i][j]){ 
       case 0: 
        c.drawImage(grass,posX,posY,pixelWideAndTall,pixelWideAndTall); 
        break; 
       case 1: 
        c.drawImage(sand,posX,posY,pixelWideAndTall,pixelWideAndTall); 

        /*Loops through every spot of the array. Based on what's 
        in that particular index, it draws a certain picture. */  

        break;                       
       case 2: 
        c.drawImage(logA,posX,posY,pixelWideAndTall,pixelWideAndTall); 
        break; 
       case 3: 
        c.drawImage(logB,posX,posY,pixelWideAndTall,pixelWideAndTall); 
        break; 
       default: 
        alert('You must have put in an input that isn\'t supported yet. Please fix!'); 
        break; 
      } 
      posX+=pixelWideAndTall; 
     } 
     posX=0; 
     posY+=pixelWideAndTall; 
    } 
} 
</script> 
<style> 
#paper{ 
    border:3px solid black; 
} 
p{ 
    font-size:6px; 
} 
</style> 
</head> 
<body>                  <!-- Just in case... --> 
<canvas id='paper' height = 0 width = 0>Your browser does not support the HTML5 Canvas element. Either try a different browser, or just give it up.</canvas> 
<p>You <strong><em>may</em></strong> need to refresh a few times for the image to load. Thank you!</p> 
</body> 
</html>

來源

2014-04-09 Ctsmario

這是因爲pixelWideAndTall變量是從提示符返回時的字符串。

時多次使用這就是爲什麼這條線的工作得到它轉換成數字：

canvas.height = map.length * pixelWideAndTall;

，但不是在加入 - 所以發生了什麼是值串聯爲一個字符串，而不是在循環中用posX等加號運算符。

要解決簡單地把它迫使一些馬上：

var pixelWideAndTall = prompt('...'); 
while(isNaN(pixelWideAndTall)){ 
    pixelWideAndTall = prompt('Alright, put in a number this time.'); 
} 

pixelWideAndTall *= 1; // this will force it to a number

可選：

pixelWideAndTall = parseInt(pixelWideAndTall, 10);

Fiddle here

PS：你真的應該考慮實施一個image loader for the images。

來源

2014-04-09 23:49:31 K3N

謝謝sooooo much，Cryptoburner！我簡直不敢相信那麼簡單！當我獲得15點聲望時，我一定會投你的答案，別擔心！：D – Ctsmario

@Ctsmario沒問題！有時候最簡單的問題往往會逃避責難。發生在我們所有的人:) – K3N

再次感謝，再次！現在，這是我的問題：爲什麼左上角的4張圖像會加載，而不是其他任何圖像？ – Ctsmario

爲什麼我的畫布只將圖片加載到左上角？

回答

相關問題