Pixi.js使用WebGL,是一个超快的HTML5 2D渲染引擎。
作为一个javascript的2D渲染器,Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。
提供无缝 Canvas 回退,支持主流浏览器,包括桌面和移动。
创建一个PIXI的实例,并展示出来,通常需要以下几步:
- 创建一个画布 (render)
- 把画布插入DOM中
- 创建一个舞台 (stage)
- 创建一个精灵 (sprite)
- 把精灵加入画布
- 把画布加入舞台
- 刷新舞台
//创建渲染器
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);
}