css - 在 Canvas HTML5 中分层文本和图像

Question

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

我使用来自 O'Reilly 的 HTML5 文本的 modernizer 启动了 Canvas 。

这是针对 iPad 的，所以我的 Canvas 是 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() 事件，然后您绘制背景图像。

我建议重组您的代码，以便所有 绘图在成功加载图像后开始。这样，就不会发生任何异步操作，并且会先绘制图像，然后绘制文本。

Here's a quick example, on jsFiddle .