您好,我正在制作一个小型 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();我可以看到文字。改变函数顺序没有什么区别...
如何做到这一点?我觉得自己很愚蠢,以至于被困在看起来如此基础的东西上。
谢谢
最佳答案
问题是您的图像是在文本之后绘制的,因此是在文本之上绘制的。这是因为加载图像需要时间。基本上,发生的事情是这样的:
- 调用 DrawScreen 函数
- 通过分配 src 属性开始加载背景图片
- 您指定 onload() 处理程序在图像加载完成后触发。
- DrawScreen 退出,已完成所有工作
- 您调用 DrawText,它会立即绘制文本
- 稍后,图像完成加载,触发 onload() 事件,然后您绘制背景图像。
我建议重组您的代码,以便所有 绘图在成功加载图像后开始。这样,就不会发生任何异步操作,并且会先绘制图像,然后绘制文本。
关于css - 在 Canvas HTML5 中分层文本和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7309229/