1.引用独立的hilo的js包。
自己找到这个版本的下载
2.先搭建舞台Stage(得有地方表演)
舞台Stage是一个各种图形、精灵动画等的总载体。所以可见的对象都要添加到舞台或其子容器后,才会被渲染出来。
Stage构造函数接收一个参数properties,此参数包含创建stage的各种属性。
var stage = new Hilo.Stage({
renderType:’canvas’, //类型
container: containerElem, //容器
width: 320, //舞台宽
height: 480 //舞台高
});
3.创建定时器
舞台Stage上的物体的运动等变化,都是通过一个定时器Ticker不断地调用Stage.tick()方法来实现刷新的。
var ticker = new Hilo.Ticker(60);
ticker.addTick(stage);
ticker.start();
4.创建可视对象
舞台上的一切对象都是可视对象,可以是图片、精灵、文字、图形,甚至DOM元素等等。Hilo提供了一些基本的可视类供您使用,比如添加一个图片到舞台上:
var bird = new Hilo.Bitmap({
image: ‘images/bird.png’
}).addTo(stage);
5.创建事件交互
要让它有事件交互,首先为舞台开启DOM事件响应
要想舞台上的图形、精灵动画等对象能响应用户的点击、触碰等交互事件,就必需先为舞台开启DOM事件响应,然后就可以使用View.on()来响应事件。
stage.enableDOMEvent(Hilo.event.POINTER_START, true);
sprite.on(Hilo.event.POINTER_START, function(e){
console.log(e.eventTarget, e.stageX, e.stageY);
});
接下来,您就可以开始利用hilo提供的各种可视类来创建各种图形、精灵动画
注意:现在按照这样来是没东西的
因为你根本没有创建容器
所以会提示报错,没找到