Question

我想在HTML画布上用

绘制一些图像

context.drawImage(Im1 ,205,18,184,38);

为了确保它加载我需要输入这样的代码但是我不能用它来绘制东西

var Im1 = new Image();
Im1.src="rechnung11014page1/img/1/Im1.png";
Im1.onload = function() {
    context.drawImage(Im1 ,205,18,184,38);
}

有没有办法加载所有图像，然后使用多个图像执行一段代码？

Answer 1

在javascript中有body onload方法。只需为它创建一个事件处理程序并在那里运行您的绘图代码。在加载所有页面元素后调用OnLoad。

当然，还需要您直接在html的正文中引用这些图像。如果它们还没有存在，您可以轻松创建一个隐藏的div来进行加载。

Answer 2

您可以使用下面定义的fn加载所有图像，在加载所有图像时调用draw fn ...

function loadImages()
{
    var imgToLoad = 3, imgLoaded = 0;

    var onImgLoad = function()
    {
        imgLoaded++;
        if(imgLoaded == imgToLoad)
            drawFromLoadedImages();
    };

    Img1 = new Image();
    Img1.src = 'images/x.png';
    Img1.onload = onImgLoad;

    Img2 = new Image();
    Img2.src = 'images/y.png';
    Img2.onload = onImgLoad;

    Img3 = new Image();
    Img3.src = 'images/z.png';
    Img3.onload = onImgLoad;
}

上面的fn确保在调用图像上的绘图功能之前加载所有3个图像。

非常古老的问题，但希望这种技术有助于其他人提出这个问题

在我的HTML画布中引用之前如何确保所有图像都已加载

2 个答案: