PIXI基础（一）

首先页面中需要添加js如下：

<script type="text/javascript" src="js/pixi.min.js"></script>

pixi的基本用法：
1，建立画布放到body中去

var app =new PIXI.Application(800,600,{
      backgroundColor:ox1099bb,
      transparent:false //背景是否设定为透明
  })
  document.body.appendChild(app.view);

除了Application还有autoDetectRenderer接口，CanvasRenderer 和 WebGLRenderer 接口，
autoDetectRenderer 可以根据客户端对 WebGL 的支持自动创建 WebGL 或 Canvas renderer。
2.创建根容器，并把根容器放到画布中

var contaner=new PIXI.Container();
app.stage.appendChild(container);

3.创建项目需求的元素

  var bunny = PIXI.Sprite.fromImage('./images/yuanxiao.png');
    bunny.anchor.set(0.5); //设置原点位置
    //显示精灵X轴位置
    bunny.x = app.renderer.width / 2;
    //显示精灵Y轴位置
    bunny.y = app.renderer.height / 2;
    //将显示精灵添加进舞台
    container.stage.addChild(bunny);

上基本案例

 <canvas id="canvas_id" width="100%" height="100%"></canvas>

js基本引用

<script type="text/javascript" src="../js/pixi.min.js"></script>

var stage = new PIXI.Stage(0xd93a3e);
//创建画布
var renderer =PIXI.autoDetectRenderer(400, 300);
// 添加到body中
document.body.appendChild(renderer.view);
//请求动画帧
requestAnimFrame( animate );

//创建材质
var texture = PIXI.Texture.fromImage("images/yuanxiao.png");
//有材质建立精灵图
var bunny = new PIXI.Sprite(texture);

// 元素定位
bunny.anchor.x = .5;
bunny.anchor.y = .5;
bunny.position.x = 200;
bunny.position.y = 150;
//精灵图添加到舞台中
stage.addChild(bunny);

var scaleflag = 1;
//不断监听函数
function animate() {
   requestAnimFrame( animate );

   bunny.rotation += 0.1;

   if(bunny.scale.x>=1){
       scaleflag = 1;
   }else if(bunny.scale.x<=0.5){
       scaleflag = 0;
   }

   scaleflag?bunny.scale.x -= 0.05: bunny.scale.x +=0.05;
   scaleflag?bunny.scale.y -= 0.05: bunny.scale.y +=0.05;

   renderer.render(stage);
}

难点：
1.pixi还不熟悉有些代码功能理解有限
2.跨域图片要处理下
3.pixi下动画的调取，有待加强学习和理解

PIXI基础（一）

推荐阅读更多精彩内容