一篇带给你Pixi.js 入门 （一）：绘制图形

,简单入门 pixi.js。,pixi.js 是一个快速、灵活的 2D WebGL 渲染引擎。,该库基于 Canvas 封装，默认优先使用 WebGL 进行二维图形绘制，充分利用 GPU 硬件加速能力。如果不支持，会回退到 2D 模式，因为 2D 模式是上层的抽象，所以性能会差一些。,首先创建一个 Application 实例。,我们使用 PIXI.Application 类创建一个新 PixiJS 应用。,该类可以传入配置对象，比如画布宽高（width / height）、背景色（backgroudColor，默认为黑色）、挂载的 canvas 元素（view，不提供 PixiJS 会创建一个）等。,app.view 可以得到 PixiJS 应用挂载的 Canvas 元素。,绘制图形需要先创建 Graphics 实例，然后调用其下的方法。,一个 Graphics 代表一个图形，当然也可以在单个 Graphics 绘制多个图形。,绘制红色矩形：,app.stage 是图形渲染的根节点，我们创建的 graphics 需要添加到 stage 下，这样才会被渲染出来。,绘制圆形：,绘制精灵：,绘制曲线不支持 SVG 的那种方便的 指令字符串 写法：,只能用类似原生 Canvas 写法那样，一步步绘制了。个人觉得很繁琐，指令字符串言简意赅多好的抽象。,使用容器，可以将多个图形进行组合，然后在其上添加位移、旋转等属性，其下的图形会得到这些效果。,Container 不绘制图形，它组合图形，类似 SVG 的 group 元素。,一些基本的用法。