最近突然对canvas绘图有一些特别的兴趣，看了很多库，被pixi的高性能所惊。可到github上搜索获取(官 网)，我们先来看看这是什么鬼东西，怎么用？

 官方解释是基于webgl的绘图库。通过canvas来获取webgl操作接口，这与canvas自身绘图api有何不同呢？答案是canvas本身绘图api由于封装层数太多，造成性能低下。首先无论是canvas还是webgl必然都通过操作系统里的opengl工作的。封装层数越多自然运行越慢啦。

 试试手先

 引入js就不说了，然后继续如下操作：

 const app = new PIXI.Application();//创建应用
 document.body.appendChild(app.view);//把应用添加到页面
//把随时要用到图片放到缓存中
 app.loader.add('obj', 'obj.png').load((loader, resources) => {
    // 创建 精灵对象（类似flash元件），初始参数是一个纹理图片
    const obj = new PIXI.Sprite(resources.obj.texture);
    const testobj = new PIXI.Sprite(resources.obj.texture);
    // 精灵的初始位置
    obj.x =0;
    obj.y = app.renderer.height / 2;

    testobj.x = app.renderer.width / 2;
    testobj.y = app.renderer.height / 2;
    // 设置 精灵 的中心
    obj.anchor.x = 0.5;
    obj.anchor.y = 0.5;

    // 把 精灵对象 添加到 舞台 类似 flash的元件
    app.stage.addChild(obj);
    app.stage.addChild(testobj);

    let b = new Bump(PIXI);
    // 这是pixi渲染时会调用的函数，可以把动作写在这里
    app.ticker.add(() => {
         obj.rotation += 0.04;
         if (bunny.x<app.renderer.width-obj.width/2) {
         	bunny.x+=1;
         }else{
         	obj.x-=1;
         	obj.position={x:0,y:obj.y}
         }
         //碰撞
         if(b.hit(obj,testobj)){
         	// console.log('碰撞')
         }
     });
    let rectangle =new PIXI.Graphics();//画笔工具，类似canvas画图
	// rectangle.lineStyle(4, 0xFF3300, 1);
	rectangle.beginFill(0x66CCFF);
	rectangle.drawRect(0, 0, 64, 64);
	rectangle.endFill();
	rectangle.x = 170;
	rectangle.y = 170;
	app.stage.addChild(rectangle);
        //console.log(app)
});

此外要说明的是 PIXI本身是没有碰撞事件的，需要借助其它库，实际上你可以完全自行做碰撞检测（基于精灵），还有就是如果在本地运行会出现图片调用跨域，最好模拟一个服务器环境（有很多搭建工具的，phpstudy什么的）

 效果如下 ：