来自简单代码的 javascript / canvas5 错误答案

【问题标题】：javascript / canvas5 error from simple code来自简单代码的 javascript / canvas5 错误
【发布时间】：2011-05-10 11:30:38
【问题描述】：

错误：未捕获的异常：[异常...“组件返回失败代码：0x80040111（NS_ERROR_NOT_AVAILABLE）[nsIDOMCanvasRenderingContext2D.drawImage]”nsresult：“0x80040111（NS_ERROR_NOT_AVAILABLE）”位置：“JS框架::http://127.0.11.1/test/canvas5_b.php::setup ::第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 上运行，所以我看不到它是怎么回事。

edit ：这是加载图像时的问题（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;

【问题讨论】：

标签： javascript html

【解决方案1】：

很可能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;

【讨论】：

可能Draw 会被调用2 次吗？还是因为尚未加载另一张图片而第一次尝试失败？
@jason：是的，它会被调用两次，但是 if 语句会检查两个图像是否都已加载。（当 MaybeDraw 运行时，它会设置 meter.loaded = true; 或 meter_bar.loaded = true;，这取决于它是哪一个。）
啊，我知道你在那里做了什么。那么，如果要加载 bajillion 图像怎么办......我想一种方法是将最大的图像设置为最后一个加载的图像，并在其 onload 时调用maybeDraw（），但我怀疑在某些情况下行不通，而且它确实不优雅。
@jason：在这种情况下，我可能会考虑为每次成功加载增加一个计数器，然后一旦计数器达到必须加载的图像数量，将图像绘制到画布上。
昨晚深夜我得出了这个结论！伟大的思想都一样！

【解决方案2】：

确保首先加载图像。例如：

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

【讨论】：

我认为 img.onload 在 img.src 之后不会触发，因为它已经加载了。必须对此进行测试。
我只是在上面重新排列以说明这一点。