Question

代码运行没有错误，但我遇到的问题是因为“.onLoad”功能使其在文本已经显示在屏幕上后显示。我面临的问题是，我希望文本（加载图形和加载变量）显示在图像上。

代码在这里：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html>
<body>
<canvas id="ctx" width="800" height="500" style="border:1px solid #d3d3d3;"></canvas>

<script>
var ctx = document.getElementById("ctx").getContext("2d");

var canvas = document.getElementById('ctx');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function(){
    context.drawImage(imageObj,0,0);
};
imageObj.src = 'img/startscreen.jpg';

ctx.fillText('Loading variables.',50,50);
character=new Object();
character.hp=1;
character.name=null;
ctx.fillText('Loading graphics..',50,100);
</script>

</body>
</html>

Answer 1

我会将背景图像分层放在文本图层后面的自己的画布上。然后，您可以清除并更新文本图层，而无需重新绘制背景图像。

#background,#overlay {
    position: absolute;
}

<canvas id="background"></canvas>
<canvas id="overlay"></canvas>

var can = document.getElementById('overlay'),
    bg_can = document.getElementById('background'),
    height = can.height = bg_can.height = 500,
    width = can.width = bg_can.width = 500,
    ctx = can.getContext('2d'),
    bctx = bg_can.getContext('2d');

var img = new Image();
img.src = ' ... ';
img.onload = init;

function init() {
  // draw the background
  bctx.drawImage(this, 0, 0);
  // draw your initial text
  updateText('hello world');
  // other stuff that is going to take time
  updateText('done');
}

function updateText(msg) {
  ctx.clearRect(0, 0, width, height);
  ctx.fillText(msg, 50, 100);
}

这是不太经过深思熟虑（我的代码示例）的重复使用目的..但我不太了解你的其他需求:)希望这有帮助。

Answer 2

如果你想在图像上叠加字符串，为什么不使用图像作为backGround imange并在其上放置文本？

<强>的CSS
试试css

#ctx{
background-image:url('img/startscreen.jpg');}

删除脚本中的图像源或在脚本中插入css

脚本中的Css

ctx.style.backgroundImage=url('img/startscreen.jpg');

Answer 3

我调用了函数，以便在背景显示后显示文本：

imageObj.src = 'img/startscreen.jpg';
imageObj.onload = function(){
 context.drawImage(imageObj,0,0);
 init()
};

function init(){
 ctx.fillText('Loading variables.',50,50);
 character=new Object();
 character.hp=1;
 character.name=null;

 ctx.fillText('Loading graphics..',50,100);
}

Javascript - 图像显示在文本上

3 个答案: