Hilo/examples/BitmapText.html
2017-01-17 16:11:06 +08:00

61 lines
2.0 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
<title>BitmapText - Hilo Example</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="../build/standalone/hilo-standalone.min.js"></script>
<script type="text/javascript" src="../build/flash/hilo-flash.min.js" data-auto="true"></script>
</head>
<body onload="init();">
<div id="header">
<h1>BitmapText</h1>
<p>BitmapText类提供使用位图文本的功能。当前仅支持单行文本。</p>
</div>
<div id="game-container"></div>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
function init(){
var BitmapText = Hilo.BitmapText;
var Stage = Hilo.Stage;
var Container = Hilo.Container;
var Ticker = Hilo.Ticker;
//init stage
var stage = new Stage({
renderType:renderType,
container: gameContainer,
width: stageWidth,
height: stageHeight
});
//start stage ticker
var ticker = new Ticker(20);
ticker.addTick(stage);
ticker.start();
var container = new Container({
x:winWidth * .5,
y:0,
background:"#aaa",
width:400,
height:400
}).addTo(stage);
var textImage = new Image();
textImage.onload = function(){
var bmp = new BitmapText({
glyphs:BitmapText.createGlyphs("0123456789 ", textImage),
y:0,
x:0,
textAlign:"center",
letterSpacing:10
}).setText("967542 2").addTo(container);
};
textImage.src = "./images/num.png";
}
</script>
</body>
</html>