Javascript - изображение, отображаемое над текстом

Код работает без ошибок, но проблема, с которой я столкнулась, связана с тем, что функция «.onLoad» отображает ее после того, как текст уже был отображен на экране. Проблема, с которой я сталкиваюсь, заключается в том, что мне хотелось бы, чтобы текст (Загрузка графики и загружаемых переменных) отображался поверх изображения.Javascript - изображение, отображаемое над текстом

Кода здесь:

<! 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>

источник

2013-12-17 MutantSpiderMonkeys

я назвал функция для t ext для отображения после фона:

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

источник

2013-12-18 19:23:55 MutantSpiderMonkeys

Я бы слой фонового изображения на своем холсте, расположенный позади текстового слоя. Затем вы можете очистить и обновить текстовый слой без повторного рисования фонового изображения.

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

Это не очень хорошо продуманы (мой пример кода) для целей повторного использования .. но я много о других ваших нужд, не знаю :) надеюсь, что это помогает.

источник

2013-12-17 14:49:09 rlemon

Если вы хотите наложить строчку на изображение, почему вы используете изображение как backGround imange и поместите текст поверх него?

Css
попробовать в CSS

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

удалить исходное изображение в сценарии или вставить CSS в самом скрипте

Css в сценариях

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

источник

2013-12-17 14:59:42 BlackPOP

Javascript - изображение, отображаемое над текстом

ответ

Смежные вопросы