來自簡單代碼的javascript/canvas5錯誤

Question

錯誤：未捕獲的異常：[異常...]組件返回失敗代碼：0x80040111（NS_ERROR_NOT_AVAILABLE）[nsIDOMCanvasRenderingContext2D.drawImage]「nsresult：」0x80040111（NS_ERROR_NOT_AVAILABLE）「location：」JS frame： ：http://127.0.11.1/test/canvas5_b.php :: setup :: line 27「data：no]

function setup() { 

    var e = document.getElementById("mycanvas"); 
    var ctx = e.getContext('2d'); 


    var meter = new Image(); 
    meter.src = "meter.jpg"; 
    var meter_bar = new Image(); 
    meter_bar.src = "meter_bar.jpg"; 
    //alert(meter); 

    ctx.beginPath();/////////LINE 27//////////// 
    ctx.drawImage(meter, 50, 100); 
    //ctx.globalCompositeOperation = "lighter"; 
    ctx.drawImage(meter_bar, 68, 123); 
    ctx.closePath(); 


} 

window.onload = setup; 

這兩個圖像都在正確的文件夾中。讓我感到驚奇的是，如果你放了一個警報（米），它就會起作用。在第27行之前。就好像它沒有加載，但我已經在window.onload上運行了，所以我沒看到那是怎麼回事。

編輯：這是一個圖像加載時的問題（ty rob）。看來最好的在全球範圍內宣佈並設置圖片src，然後調用的window.onload =設置，如：（糾正我，如果這是不好的）

var img1, img2; 
img1 = new Image(); 
img2 = new Image(); 
//declare and set the images src 
img1.src = "meter.jpg"; 
img2.src = "meter_bar.jpg"; 

var canvasHeight, canvasWidth; 
canvasHeight = 300; 
canvasWidth= 600; 

var ctx; 


function setup() { 
    var e = document.getElementById("mycanvas"); 
    ctx = e.getContext('2d'); 
    draw(); 
} 

function draw() { 
    ctx.clearRect(0,0,canvasWidth, canvasHeight); 
    ctx.beginPath(); 
    ctx.drawImage(img1, 50, 100); 
    ctx.drawImage(img2, 68, 123); 
    ctx.closePath(); 
} 

window.onload = setup; 

Answer 1

確保圖像首先加載。例如：

var img = new Image(); 
img.onload = function(){ 
    ctx.drawImage(img,0,0); 
    } 

// put this after onload, otherwise onload may 
// not be called if image is in cache 
img.src = 'whatev.png'; 

Answer 2

這可能是由alert引入的延遲是足以讓圖像加載，但沒有alert，圖像沒有及時裝載。嘗試僅在圖像加載後將圖像繪製到畫布上：

function setup() { 

    function maybeDraw() { 
     this.loaded = true; 
     if(meter.loaded && meter_bar.loaded) { 
      ctx.beginPath(); 
      ctx.drawImage(meter, 50, 100); 
      //ctx.globalCompositeOperation = "lighter"; 
      ctx.drawImage(meter_bar, 68, 123); 
      ctx.closePath(); 
     } 
    } 

    var e = document.getElementById("mycanvas"); 
    var ctx = e.getContext('2d'); 

    var meter = new Image(); 
    var meter_bar = new Image(); 
    meter.onload = maybeDraw; 
    meter_bar.onload = maybeDraw; 
    meter.src = "meter.jpg"; 
    meter_bar.src = "meter_bar.jpg"; 

} 

window.onload = setup;