什么是 pixi-legacy
Pixi.js 是 HTML5 Canvas 和 WebGL 的轻量级 2D 游戏库。在 Pixi.js 的基础上，pixi-legacy 是 Pixi.js 的一个备用版本。它提供了一些旧版版本的 API，使得非常老的项目可以用 pixi-legacy 代替 Pixi.js 直接升级。
此外，pixi-legacy 支持有限制的 WebGL 支持，这使得它可以在旧/低性能浏览器中工作，尽管它的能力有限。
安装
可以通过 npm 安装 pixi-legacy：
npm install pixi-legacy
使用
pixi-legacy 被加载时，与 Pixi.js 非常相似，但有一些要点：
导入
你需要从包路径中引入 PIXI 对象，例如：
import * as PIXI from 'pixi-legacy';
PIXI 对象是你与 Pixi.js 进行交互的主要方向。
创建视图
在创建 Pixi.js 的根视图时，你可以使用任何 HTML DOM 元素作为容器，例如：
const app = new PIXI.Application({ width: 500, height: 500, view: document.querySelector('#pixi_canvas') });支持设备类型
由于 pixi-legacy 支持有限的 WebGL 支持，因此它不支持所有设备类型。你可以使用以下代码来检测设备类型是否受到支持：
if (PIXI.utils.isWebGLSupported()) {
console.log('支持 WebGL');
} else {
console.log('不支持 WebGL');
}创建 Sprite
在 pixi-legacy 中创建 sprite，与 Pixi.js 一样简单。你可以使用以下代码创建图片 Sprite：
const sprite = PIXI.Sprite.from('路径/图片.png');加载资源
你可以通过 PIXI.Loader 来加载你的游戏和资源。以下代码创建了 PIXI.Loader：
const loader = PIXI.Loader.shared;
然后使用以下代码将资源添加到加 载器中：
loader.add('路径/图片.png');使用特效
pixi-legacy 与 Pixi.js 一样支持对图像使用多种特效。可以使用以下示例代码：
const filter = new PIXI.filters.DisplacementFilter(sprite.texture); sprite.filters = [filter];
这段代码为 sprite 实例创建了 filter 实例，并将其应用于 sprite 实例。
总结
pixi-legacy 是可以在旧/低性能浏览器上使用的 Pixi.js 的备用版本，支持有限的 WebGL，适用于一些老的项目直接升级使用。在其中创建视图、Sprite、加载资源，以及使用特效等方面，与 Pixi.js 的使用非常类似。
示例代码：
-- -------------------- ---- -------
------ - -- ---- ---- --------------
----- --- - --- ------------------ ------ ---- ------- ---- ----- -------------------------------------- ---
-- ------------------------------- -
--------------- --------
- ---- -
---------------- --------
-
----- ------ - ------------------------------
----- ------ - -------------------
------------------------
----- ------ - --- ------------------------------------------------
-------------- - ---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005605a81e8991b448de7ef