帆布的drawImage不工作

Question

我試圖借鑑HTML畫布圖像：

var mainCanvas = document.getElementById('mainCanvas'); 
var ctx = mainCanvas.getContext('2d'); 

我做一個Ajax請求，並解析，我從它那裏得到（完美的作品）的XML數據，後來當我畫它在畫布上的不同形狀也是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 

    } 
}); 

我有Chrome開發者工具的形象是加載檢查;此外，正在調用.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：爲了調試的目的，我建議使用console.log超過alert。