pixi.js的简单介绍。pixi.js是一个快速灵活的2DWebGL渲染引擎。该库基于Canvas包。二维图形绘制默认首选WebGL，充分利用GPU硬件加速能力。如果不支持，就会回退到2D模式，因为2D模式是对上层的抽象，所以性能会更差。首先创建一个Application实例。我们使用PIXI.Application类来创建一个新的PixiJS应用程序。import*asPIXIfrom"pixi.js";constapp=newPIXI.Application({width:640,height:360});document.body.appendChild(app.view);//绘制内容//...这个类可以传入配置对象，比如画布的宽高（width/height）、背景颜色（backgroudColor，默认为黑色）、挂载的画布元素（view，如果没有提供，PixiJS会创建一个）等。app.view可以获取PixiJS应用挂载的Canvas元素。绘制图形要绘制图形，需要先创建一个Graphics实例，然后调用其下的方法。一个Graphics代表一个图形，当然可以在一个Graphics中绘制多个图形。绘制一个红色矩形：constrect=newPIXI.Graphics();rect.beginFill(0xff0044);//填充颜色rect.lineStyle({width:2,color:0x0000ff});//strokerect.drawRect(10,10,100,50);rect.endFill();app.stage.addChild(rect);app.stage是图形渲染的根节点，我们创建的图形需要添加到舞台上，这样他们就会被渲染。画一个圆：constcircle=newPIXI.Graphics();circle.beginFill(0x00ff00);circle.drawCircle(200,10,50);circle.endFill();app.stage.addChild（圆圈）；绘制精灵：constbunny=PIXI.Sprite.from('examples/assets/bunny.png');bunny.anchor.set(0.5);//设置精灵图的中心点bunny.x=app.screen.width/2;//在画布中心绘制精灵图bunny.y=app.screen.height/2;app.stage.addChild（兔子）；画曲线不支持SVG方便的命令串写法：//不支持consttrackPath=newPath2D("M1010h80v80h-80Z");只能像原来Canvas的写法一样一步步画出来。个人觉得很繁琐，指令串简明扼要。constpath=newPIXI.Graphics();path.lineStyle({width:1,color:0x0000ff});path.moveTo(10,10);path.lineTo(20,100);path.bezierCurveTo(40,120),60,120,80,100)app.stage.addChild(路径);容器Container就是用一个容器来组合多个图形，然后给它加上位移、旋转等属性，它下面的图形就会得到这些效果。Container不绘制图形，它对图形进行分组，类似于SVG的组元素。constcontainer=newPIXI.Container();容器.x=80;容器.y=80;container.addChild（矩形，圆形）；app.stage.addChild（容器）；最后是一些基本用法。
