在Canvas HTML5中分层文本和图像

Question

您好，我正在制作一个小型的HTML5画布演示。

我使用了O'Reilly的HTML5文本中的Modernizer来初始化画布。

这是为iPad准备的，所以我的画布大小为1024乘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);
}

I then call both functions:

    DrawScreen();
    DrawText();

然而，我的背景图片完全覆盖了文本。或者说在其上面。如果我禁用DrawScreen()函数，我可以看到文本。更改函数顺序没有任何区别......

如何做到这一点？我感到非常愚蠢，被这个看起来很基础的东西卡住了。

谢谢

- Komsomol

Answer 1

问题在于您的图像是在文本之后绘制的，因此覆盖了文本。这是由于加载图像所需的时间造成的。基本上，正在发生以下情况：

• 您调用DrawScreen函数
• 通过分配src属性开始加载背景图像
• 您将onload()处理程序分配给在图像完成加载后触发。
• DrawScreen退出，完成所有工作
• 您调用DrawText，它立即绘制文本
• 稍后某个时候，图像完成加载，触发onload()事件，然后绘制背景图像。

我建议重新构建代码，以便所有绘图都是通过成功加载图像启动的。这样，没有任何异步操作，图像将被绘制，然后是文本。

这里是一个快速示例，在jsFiddle上。

- Matt Gibson

---

问题就像Matt指出的那样...在backgroundImage.onload = function()的结尾添加DrawText();。 - Wayne

马特是对的，我没有按正确的顺序加载元素！因此，文本在图像本身之前被呈现。谢谢。 - Komsomol