mirror of
https://github.com/hiloteam/Hilo.git
synced 2025-12-08 20:35:59 +00:00
65 lines
3.1 KiB
HTML
65 lines
3.1 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>Graphics - 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>Graphics</h1>
|
|
<p>Graphics类包含一组可方便创建各种矢量图形的方法。</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();
|
|
|
|
//rect
|
|
var g1 = new Hilo.Graphics({width:100, height:100, x:40, y:20});
|
|
g1.lineStyle(1, "#009898").beginFill("#0ff").drawRect(0.5, 0.5, 99, 99).endFill().addTo(stage);
|
|
|
|
//round rect
|
|
var g2 = new Hilo.Graphics({width:100, height:100, x:180, y:20});
|
|
g2.lineStyle(10, "#009898").beginFill("#0ff").drawRoundRect(5, 5, 90, 90, 20).endFill().addTo(stage);
|
|
|
|
//circle with radial gradient fill
|
|
var g3 = new Hilo.Graphics({width:100, height:100, x:40, y:150});
|
|
g3.lineStyle(2, "#009898").beginRadialGradientFill(50, 50, 0, 50, 50, 50, ["#fff", "#4ffcfc"], [0, 1]).drawCircle(2, 2, 48).endFill().addTo(stage);
|
|
|
|
//ellipse
|
|
var g4 = window.g4 = new Hilo.Graphics({width:100, height:60, x:180, y:170});
|
|
g4.lineStyle(5, "#009898").beginFill("#0ff").drawEllipse(5, 5, 90, 50).endFill().addTo(stage);
|
|
|
|
//rect with linear gradient
|
|
var g5 = new Hilo.Graphics({width:70, height:90, x:55, y:290});
|
|
g5.lineStyle(2, "#009898").beginLinearGradientFill(0, 0, 60, 0, ["#fff", "#4ffcfc"], [0.3, 1]).drawRect(2, 2, 66, 86).endFill().addTo(stage);
|
|
|
|
//svg path
|
|
var svgPath = "M53 84 C53 84 51 84 51 84 C51 89 53 94 56 94 C64 94 71 89 71 84 C71 72 64 64 56 64 C42 64 31 72 31 84 C31 100 42 114 56 114 C75 114 91 100 91 84 C91 61 75 44 56 44 C31 44 11 61 11 84 C11 111 31 134 56 134 C86 134 111 111 111 84 C111 50 86 24 56 24";
|
|
var g6 = new Hilo.Graphics({width:120, height:150, x:170, y:250});
|
|
g6.lineStyle(4, "#02d1d1").drawSVGPath(svgPath).closePath().endFill().addTo(stage);
|
|
|
|
//rect with linear gradient
|
|
var g7 = new Hilo.Graphics({width:90, height:90, x:320, y:20});
|
|
g7.setLineDash([5, 4]).lineStyle(2, "#009898").drawRect(4, 4, 80, 80).endFill().beginPath().setLineDash([]).lineStyle(2, "#f96").drawRect(14, 14, 60, 60).endFill().addTo(stage);
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |