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

103 lines
2.9 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>transformTest - 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>
<style>
#game-container{
margin: 5px;
border: 1px solid #000;
}
</style>
</head>
<body onload="init();">
<div id="header">
<h1>transformTest</h1>
<p>测试各种渲染模式的transform是否一致。</p>
</div>
<div id="game-container"></div>
<script>
stageWidth = 800;
stageHeight = 400;
</script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
function init(){
//init stage
var stage = new Hilo.Stage({
renderType:renderType,
container: gameContainer,
width: stageWidth,
height: stageHeight
});
//start stage ticker
var ticker = new Hilo.Ticker(60);
ticker.addTick(stage);
ticker.start();
//create a bitmap
var bmp = new Hilo.Bitmap({
image: 'images/fish.png',
rect: [0, 0, 174, 126],
x: 87,
y: 0,
pivotX:87,
pivotY:0,
rotation:30,
width:87
}).addTo(stage);
container0 = new Hilo.Container({
x:100,
y:50,
pivotX:100,
pivotY:50,
width:200,
height:200,
rotation:20,
alpha:0.5
}).addTo(stage);
var bmp = new Hilo.Bitmap({
image: 'images/fish.png',
rect: [0, 0, 174, 126],
x: 110,
y: 210,
pivotX:110,
pivotY:220,
rotation:70
}).addTo(container0);
var container1 = new Hilo.Container({
x:200,
y:200,
pivotX:100,
pivotY:150,
scaleX:-1,
scaleY:2,
width:200,
height:200,
rotation:135,
alpha:0.5
}).addTo(container0);
var bmp = new Hilo.Bitmap({
image: 'images/fish.png',
rect: [0, 0, 174, 126],
x: 110,
y: 110,
pivotX:100,
pivotY:20,
rotation:45
}).addTo(container1);
}
</script>
</body>
</html>