왜 내 캔버스는 이미지를 왼쪽 상단 모서리에만로드합니까?

저는 비디오 게임지도를 만들 프로그램을 만들고자합니다. 이전에는 완벽하게 작동했지만 캔버스의 너비와 높이를 자동으로 설정하는 변수 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, Cryptoburner 감사합니다. 나는 그것이 그렇게 단순하다는 것을 믿을 수 없다! 15 평판을 얻었을 때, 나는 분명히 당신의 답변에 투표 할 것입니다, 걱정하지 마십시오! : D – Ctsmario

@Ctsmario 문제 없음! 가장 간단한 문제는 때때로 레이더를 피하는 경향이 있습니다. 우리 모두에게 일어나는 일 :) – K3N

다시 한번 고마워! 자, 이것이 제 질문입니다. 왼쪽 위 모서리에있는 4 개의 이미지가 왜로드되지만 나머지는로드되지 않는 이유는 무엇입니까? – Ctsmario

왜 내 캔버스는 이미지를 왼쪽 상단 모서리에만로드합니까?

답변

관련 문제