小编Kom*_*mol的帖子

您正在制作一个小型HTML5画布演示.

我使用O'Reilly的HTML5文本中的现代化器启动了画布.

这适用于iPad,因此我的画布是1024 x 768.

然后我在DrawScreen函数中加载背景图像.

var backgroundImage = new Image();
backgroundImage.src = "images/background.jpg";
backgroundImage.onload = function(){
    context.drawImage(backgroundImage,0,0);
}

我想在此添加文本.所以我这样做:

function drawText(){
    context.fillStyle ="gray";
    context.font = "28px Helvetica";        
    context.fillText(message, 260, 700);
}

然后我调用这两个函数:

    DrawScreen();
    DrawText();

然而我的背景图像完全覆盖了我的文字.或者是最重要的.如果我禁用DrawScreen(); 我可以看到文字.改变功能顺序不会有所不同......

这该怎么做？我觉得很蠢,所以我坚持看似那么基本的东西.

谢谢

我使用Preload JS来加载我的图像.然而,其中一些图像需要在CSS中作为背景图像注入.但这不起作用.

当我将'背景'传递给$('.main').css('background-image','url('+ img +')'); HTML是"background-image:url(http://127.0.0.1:8080/undefined);"

我的问题是我想预加载图像,通过它的ID获取它并将其写入CSS Background Image.我该怎么做呢？

查看事件路径只是 - blob:http%3A // 127.0.0.1%3A8080/3694c430-db8f-4543-a85e-9d1b9e8da50d

如果我将图像放入我的CSS中,我可以看到它是双重加载的.加载CSS图像,然后PreloadJS再次加载它们.

我通过追踪HandleFileLoad事件来实现它.获取ID然后注入event.result.currentSrc但它需要很多代码重复.

    if(event.item.id === 'slide1'){
        $(".slide1").css({"background-image": 'url('+event.result.currentSrc+')'});
    }

但是,如果我有很多图像可以推进到背景中,这并不理想.

任何帮助,将不胜感激.

以下是我的代码.

var preload;
var loader;
var manifest;

manifest = ([
    {id: 'background', src:'Main_1_Background.jpg'}
]);

preload = new createjs.LoadQueue(true, 'img/');
preload.on('fileload', handleFileLoad);
preload.on('progress', handleOverallProgress);
preload.on('fileprogress', handleFileProgress);
preload.on('error', handleFileError);

preload.setMaxConnections(5);
preload.loadManifest(manifest);


// File complete handler
function handleFileLoad(event) {
    console.log(event);
    console.log(event.item.id);

    var img = preload.getResult("background",true);
    $('.main').css('background-image', 'url(' + img + ')');

}

// File progress handler
function …