一起学 Pixijs（一）：常见图形的绘制

,大家好，我是前端西瓜哥。,pixijs 是一个强大的 Web Canvas 2D 库，以其强大性能而著称。其底层使用了 WebGL 实现了硬件加速，当然如果不支持的话，也能回退为 Canvas。,本文使用的 pixijs 版本为 7.1.2。,Application 代表一个 pixijs 应用，对应一个 Canvas。,创建一个 Application 实例：,支持的构造参数很多，这里列举一些常用选项：,更多高阶配置看 官方 API 文档。,这里我没有提供 view，所以我们要将 pixijs 给我们生成的 Canvas 元素挂到页面上：,下面我们开始绘制图形。,Graphics 类常用于绘制一些比较基础的图形，比如矩形、圆形、线段等。除了绘制图形，还可以用它来设置遮罩（mask）或点击区域（hitArea）。,在一个 Graphics 下，不只是只能画一个图形，也可以画多个图形。,绘制红色填充色的矩形。,app.stage 是放置图形的地方，也就是 “舞台”。这里我们要通过 addChild 将创建的图形加入进去，之后 pixijs 的渲染器会读取到这个图形进行绘制。,,drawRect 是一种旧的写法，看起来是直接在画布上绘制矩形，但其实底层是创建一个 Rect 对象添加到图形树上，先不绘制，然后在图形树准备好之后的渲染阶段，再读取该对象的数据并且绘制。这和 CanvasRenderingContext2D.fillRect 属于不同的绘制机制，后者不会维护图形树状态。,Graphics 本质并不是绘制工具，而是构建树的工具，绘制的实现在其他地方。,另一种写法，首先创建 PIXI.Rectangle 实例，这个实例只是描述一个矩形的属性，本身并不能直接添加到 stage 上，需要通过 Graphics 的 drawShape 添加到 Graphics 上。,绘制圆形同理：,效果：,,有种严重的锯齿感，这是因为 pixijs 默认是不开抗锯齿的，因为抗锯齿处理要消耗额外的性能。,可以开启全局的抗锯齿能力：,开启抗锯齿后的圆形，肉眼可见地圆润了：,,代码：,效果：,,代码：,效果：,,代码：,效果：,,代码：,效果：,,代码：,效果：,,本文主要讲了 pixijs 中一些基础图形的绘制写法。