来自简单代码的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;