简单代码中的 javascript/canvas5 错误

Question

错误:未捕获的异常:[异常...“组件返回失败代码:0x80040111(NS_ERROR_NOT_AVAILABLE)[nsIDOMCanvasRenderingContext2D.drawImage]”nsresult:“0x80040111(NS_ERROR_NOT_AVAILABLE)”位置:“JS框架::http://127.0.11.1/test/canvas5_b.php:设置::第 27 行数据:否]

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 = setup，如下所示:(如果这不好，请纠正我)

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';