Question

错误：未捕获的异常：[Exception ...“组件返回失败代码：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 = 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';

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;

简单代码中的javascript / canvas5错误

2 个答案: