预加载的图像未绘制到画布

时间:2014-11-12 17:46:51

标签: javascript html html5 canvas

每次我使用画布时都会遇到问题。我认为通常与烦人的onLoad()有关,它似乎随时会触发。

我有以下预加载功能:

//  XXXXXXXXXXXXXXX  PRELOAD IMAGES  XXXXXXXXXXXXXXXXXXXXX
function preloadIcons()
{
    for (asset in sectorAssets) 
    {
        var currentImage = sectorAssets[asset].name;
        icons[currentImage] = new Image();
        if(sectorAssets[asset].factionNeutral == true)
        {
            var variableFolder = "../Images/Icons/NonRace/";
        }
        else
        {
            var variableFolder = "../Images/Icons/" + controlRace[1] + "/";         
        }
        var URL = variableFolder + sectorAssets[asset].icon;
        icons[currentImage].src = URL;
    }
}
//  XXXXXXXXXXXXXXX  END PRELOAD IMAGES  XXXXXXXXXXXXXXXXXXXXX

它使用来自另一个容器对象的名称命名的图像对象填充图标。给我: 对象{交易站:img,Planet Ix:img,Asteroid1:img}

然后我尝试在绘制循环中使用这些图像对象

//XXXXXXXXXXXXXXXXXXXXX  DRAW LOOP  XXXXXXXXXXXXXXXXXXXXXXXXXXXX
// iterate sectorAssets and draw all of the live actors to the GUI
function drawLoop()
{
        for(stuff in sectorAssets)
        {
            var drawPlace = sectorAssets[stuff].loc;
            var drawX = drawPlace.split("_")[0];
            var drawY = drawPlace.split("_")[1];
            console.log(icons);
            var newImger = icons[sectorAssets[stuff].name];
            context.drawImage(newImger,150,150);
        }
}

//XXXXXXXXXXXXXXXXXXXXX  END DRAW LOOP  XXXXXXXXXXXXXXXXXXXXXXXXXXXX

这将在预加载容器图标中创建对相应图像对象的引用,然后绘制它。问题是,什么都没有出现。绝对没有。我在尝试调用drawLoop之前尝试添加警报,以便为预加载提供更多时间并且没有任何效果。控制台中没有错误,并且图标对象看起来正确,每个属性上都有一个图像对象。是什么赋予了?这是时间问题吗?

PS:我刚刚在绘制循环中添加了一个标准的矩形绘图。它肯定会被调用,并且需要多次。放下drawImages之后仍然没有产生任何东西。

0 个答案:

没有答案