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 - 通過文本顯示圖像

回答

相關問題