Pixi.js

Pixi.js使用WebGL，是一个超快的HTML5 2D渲染引擎。

作为一个javascript的2D渲染器，Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。

提供无缝 Canvas 回退，支持主流浏览器，包括桌面和移动。

 

创建一个PIXI的实例，并展示出来，通常需要以下几步：

1. 创建一个画布 (render)
2. 把画布插入DOM中
3. 创建一个舞台 (stage)
4. 创建一个精灵 (sprite)
5. 把精灵加入画布 
6. 把画布加入舞台
7. 刷新舞台

//创建渲染器

let renderer = PIXI.autoDetectRenderer(900,900,{backgroundColor:0x1099bb});

//将渲染器画布插入DOM

document.body.appendChild(renderer.view);

//创建舞台

let stage = new PIXI.Container();

//创建材质

var texture = PIXI.Texture.fromImage('required/assets/basics/bunny.png');

//创建精灵

var sprite= new PIXI.Sprite(texture);

//设置精灵在舞台中的位置

sprite.anchor.x=0.5;

sprite.anchor.y=0.5;

sprite.position.x=200;

sprite.position.y=200;

//将精灵放入舞台中

stage.addChild(sprite);

//开始渲染画面

animate();

function animate(){

　　requestAnimationFrame(animate);

　　renderer.render(stage);

}