PixiJS #

什么是 PixiJS？ #

PixiJS 是一个超快的 2D 渲染引擎，它使用 WebGL 进行硬件加速渲染，在不支持 WebGL 的环境下自动回退到 Canvas。PixiJS 非常适合创建交互式图形、游戏和数据可视化应用。

核心定位 #

text

┌─────────────────────────────────────────────────────────────┐
│                        PixiJS                                │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  WebGL 渲染  │  │  超高性能    │  │  易于使用   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  丰富滤镜    │  │  跨平台      │  │  活跃社区   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

为什么选择 PixiJS？ #

优势 #

text

✅ 极致性能
   - WebGL 硬件加速
   - 批量渲染优化
   - 自动管理渲染批次

✅ 易于上手
   - 简洁的 API
   - 丰富的文档
   - 大量示例代码

✅ 功能丰富
   - 精灵系统
   - 图形绘制
   - 文本渲染
   - 滤镜效果
   - 交互事件

✅ 跨平台
   - 支持所有现代浏览器
   - 移动端友好
   - 可与 Electron 集成

快速开始 #

安装 #

bash

npm install pixi.js

基本使用 #

javascript

import { Application, Sprite } from 'pixi.js';

const app = new Application();

await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
});

document.body.appendChild(app.canvas);

// 创建精灵
const sprite = Sprite.from('bunny.png');
sprite.anchor.set(0.5);
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

app.stage.addChild(sprite);

文档结构 #

text

PixiJS 文档
├── 入门基础
│   ├── PixiJS 简介
│   └── 安装与配置
│
├── 核心功能
│   ├── 精灵渲染
│   ├── 图形绘制
│   └── 文本渲染
│
└── 进阶内容
    ├── 滤镜效果
    └── 事件系统

核心概念 #

Application #

应用程序入口，管理渲染器和主循环。

Container #

显示对象的容器，用于组织显示对象层级。

Sprite #

精灵，用于显示图像。

Graphics #

图形，用于绘制矢量图形。

Text #

文本，用于显示文字。

PixiJS vs Canvas API #

特性	PixiJS	Canvas API
渲染方式	WebGL/Canvas	Canvas
性能	高（硬件加速）	中
易用性	高	低
功能	丰富	基础
学习曲线	中等	低

学习路径 #

text

入门阶段
├── PixiJS 简介
├── 安装与配置
└── 第一个应用

进阶阶段
├── 精灵渲染
├── 图形绘制
├── 文本渲染
└── 动画系统

高级阶段
├── 滤镜效果
├── 事件系统
├── 性能优化
└── 游戏开发

下一步 #

现在你已经了解了 PixiJS 的基本概念，接下来学习 PixiJS 简介，开始创建你的第一个图形应用！