캔버스의 drawImage

Question

내가 HTML 캔버스에 이미지를 그릴하려고 작동하지 캔버스에 다른 모양도 100 % 작동합니다. 무엇 작동하지 않는 것은 다음의 코드 조각 그림 이미지입니다 : 나는 이미지를로드하는 크롬 개발자 도구로 확인할

$(data).find('Object').each(function(){ 
    type = $(this).attr('type'); 
    x = $(this).attr('X'); 
    y = $(this).attr('Y'); 
    switch(type){ 
    case '2': 
    height = h_panel; 
    width = w_panel; 
    ctx.fillStyle = sColor; 
    ctx.fillRect(x,y,width,height); 
    break; 
    case '1': 
    var powerFactoryImg = new Image(); 
    powerFactoryImg.onload = function(){ 
     alert('test'); 
     ctx.drawImage(powerFactoryImg,x,y,90,80); 
    }; 
    powerFactoryImg.src = 'images/power_factory.png'; 
    break; 

    //Other cases go here - they draw rectangles - all of them work 

    } 
}); 

는; 또한 .onload에서 경고가 호출되고 있습니다. 이 코드는 Chrome과 FF 모두에서 작동하지 않습니다. 여기에 무슨 문제가있을 수 있습니까?

당신에게

Answer 1

버그가 가능성이 과제에서 var의 부재로 인해 발생합니다 감사합니다. 루프에서는 type, x 및 y 변수를 계속 덮어 씁니다. 문제를 해결하려면 var 앞에 붙여 넣으십시오.

은 참조 : What is the purpose of the var keyword and when to use it (or omit it)?

$(data).find('Object').each(function(){ 
    var type = $(this).attr('type');//<-- var 
    var x = $(this).attr('X');  //<-- var 
    var y = $(this).attr('Y');  //<-- var 
    switch(type){ 
    case '2': 
     var height = h_panel; // <-- var 
     var width = w_panel; // <-- var 
     ctx.fillStyle = sColor; 
     ctx.fillRect(x,y,width,height); 
    break; 
    case '1': 
     var powerFactoryImg = new Image(); 
     powerFactoryImg.onload = function(){ 
      alert('test: ' + [x, y]); //<-- "test" is not very useful. Add [x,y] 
      ctx.drawImage(powerFactoryImg,x,y,90,80); 
     }; 
     powerFactoryImg.src = 'images/power_factory.png'; 
    break; 

    //Other cases go here - they draw rectangles - all of them work 

    } 
}); 

PS를 : 디버깅 목적을 위해, 내가 alert 이상 console.log를 사용하는 것이 좋습니다.