mirror of
https://github.com/hiloteam/Hilo.git
synced 2025-12-08 20:35:59 +00:00
77 lines
2.7 KiB
HTML
77 lines
2.7 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>View.background - 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>View.background</h1>
|
|
<p>所有View都可以设置背景。CanvasRenderer还支持渐变和图片背景。</p>
|
|
</div>
|
|
<div id="game-container"></div>
|
|
<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(20);
|
|
ticker.addTick(stage);
|
|
ticker.start();
|
|
|
|
//create a container with background
|
|
var container = new Hilo.Container({
|
|
width: stage.width,
|
|
height: stage.height,
|
|
background: '#efe'
|
|
}).addTo(stage);
|
|
|
|
var view = new Hilo.View({
|
|
width: stage.width - 40,
|
|
height: 50,
|
|
x: 20,
|
|
y: 20
|
|
}).addTo(container);
|
|
|
|
if(!Hilo.isFlash && stage.renderer.renderType === 'canvas'){
|
|
//background: gradient fill, `CanvasRenderer` only
|
|
var gradient = stage.renderer.context.createLinearGradient(0, 0, 0, view.height);
|
|
gradient.addColorStop(0, '#fc0');
|
|
gradient.addColorStop(0.5, '#ff0');
|
|
gradient.addColorStop(1.0, '#0f0');
|
|
view.background = gradient;
|
|
|
|
var fish = new Hilo.View({
|
|
width: 174,
|
|
height: 126,
|
|
x: 75,
|
|
y: 100
|
|
}).addTo(stage);
|
|
|
|
//background: image fill, `CanvasRenderer` only
|
|
var img = new Image();
|
|
img.src = 'images/fish.png';
|
|
img.onload = function(){
|
|
img.onload = null;
|
|
var pattern = stage.renderer.context.createPattern(img, 'no-repeat');
|
|
fish.background = pattern;
|
|
}
|
|
}
|
|
else{
|
|
view.background = "#f96";
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |