在Canvas HTML5中分层文本和图像

Question

您正在制作一个小型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(); 我可以看到文字.改变功能顺序不会有所不同......

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

谢谢

Answer 1

问题是您的图像是在您的文本之后 - 因此在您的文本之上绘制的.这是因为图像加载所需的时间.基本上,正在发生的是这样的:

• 您调用DrawScreen函数
• 您可以通过分配src属性来开始加载背景图像
• 一旦图像加载完毕,就将onload()处理程序分配给它.
• DrawScreen退出,完成了所有工作
• 您调用DrawText,它会立即绘制文本
• 稍后,图像完成加载,触发onload()事件,然后绘制背景图像.

我建议重新构建代码,以便成功加载图像,从而启动所有绘图.这样,就不会发生任何异步,并且将绘制图像,然后是文本.

这是一个关于jsFiddle的快速示例.