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等的plus运算符。

要修复，只需立即将其强制转换为数字：

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。

为什么我的画布只加载左上角的图像？

1 个答案: