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（）事件，然后绘制背景图像。

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

Here's a quick example, on jsFiddle

在Canvas HTML5中分层文本和图像

1 个答案: