Javascript-在文本上显示图像_Javascript_Html

Javascript-在文本上显示图像

javascript html

Javascript-在文本上显示图像,javascript,html,Javascript,Html,代码运行时没有bug，但我遇到的一个问题是“.onLoad”函数使它在文本已经显示在屏幕上之后显示。我面临的问题是，我想如果文本（加载图形和加载变量）显示在图像上代码如下： <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd"> <html> <body> <ca

代码运行时没有bug，但我遇到的一个问题是“.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>


var ctx=document.getElementById（“ctx”）.getContext（“2d”）；
var canvas=document.getElementById（'ctx'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
};
imageObj.src='img/startscreen.jpg'；
ctx.fillText（'加载变量'，50,50）；
character=新对象（）；
字符，hp=1；
character.name=null；
ctx.fillText（'Loading graphics..'，50100）；

我会在文本层后面的画布上对背景图像进行分层。然后可以清除和更新文本层，而无需重新绘制背景图像

#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);
}

#背景，#覆盖{
位置：绝对位置；
}
var can=document.getElementById（'overlay'），
bg_can=document.getElementById（'background'），
高度=can.height=bg_can.height=500，
宽度=罐。宽度=bg_罐。宽度=500，
ctx=can.getContext（'2d'），
bctx=bg_can.getContext（'2d'）；
var img=新图像（）；
img.src='…'；
img.onload=init；
函数init（）{
//画背景
bctx.drawImage（this，0，0）；
//画出你的初始文本
updateText（“hello world”）；
//其他需要时间的东西
updateText（'done'）；
}
函数updateText（msg）{
ctx.clearRect（0，0，宽度，高度）；
ctx.fillText（msg，50，100）；
}

出于重用目的，这一点考虑得不是很好（我的代码示例）。。但我对你的其他需求了解不多：）希望这能有所帮助

若要在图像上覆盖字符串，为什么不使用图像作为背景图像，并在其上放置文本

Css
试用css

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

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

脚本中的Css

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

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

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);
}