為什么我的畫布僅加載左上角的圖像？

Question

我正在嘗試制作一個可以制作視頻游戲地圖的程序。 之前它工作得非常好，但是我添加了一個變量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>

Answer 1

這是因為從提示返回時， 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);

在這里擺弄

PS：您應該真正考慮為圖像實現圖像加載器。

為什么我的畫布僅加載左上角的圖像？

問題描述

1 個解決方案

解決方案1
1 已采納

為什么我的畫布僅加載左上角的圖像？

問題描述

1 個解決方案

解決方案1 1 已采納

解決方案1
1 已采納