# PixiJS 简介

# 什么是 PixiJS？ {#what-is-pixijs}

PixiJS 是一个开源的 2D 渲染引擎，它使用 WebGL（或回退到 Canvas）来创建丰富的图形和交互式内容。无论是数据可视化、游戏开发还是创意动画，PixiJS 都能提供出色的性能。

# 核心特性 {#core-features}

高性能渲染：基于 WebGL 硬件加速，支持大量 Sprite 同时渲染
场景图（Scene Graph）：层级化的容器结构，方便管理显示对象
丰富的功能：Sprite、Graphics、Text、Particle、Filter 等开箱即用
跨平台：支持所有主流浏览器，自动降级到 Canvas
插件生态：支持自定义插件扩展功能

# PixiJS v8 新变化 {#pixijs-v8-changes}

PixiJS v8 是重大版本更新，带来了许多改进：

# 1. 新的渲染架构 {#new-rendering-architecture}

// v8 使用新的 Application API
import { Application, Assets, Sprite } from 'pixi.js';

const app = new Application();
await app.init({ width: 800, height: 600 });
document.body.appendChild(app.canvas);

1
2
3
4
5
6

# 2. Assets 系统重构 {#assets-system}

// v8 统一的资源管理
await Assets.load([
    { alias: 'bg', src: 'images/bg.png' },
    { alias: 'logo', src: 'images/logo.png' }
]);
const bg = Sprite.from('bg');

1
2
3
4
5
6

# 3. 更好的 TypeScript 支持 {#typescript-support}

PixiJS v8 完全用 TypeScript 重写，类型定义更加完善。

# 4. WebGPU 支持（实验性） {#webgpu-support}

v8 底层架构重构，为 WebGPU 支持做好了准备。

# 适用场景 {#use-cases}

场景	说明
🎮 游戏开发	2D 游戏、H5 小游戏
📊 数据可视化	实时图表、仪表盘
🎨 创意工具	绘图工具、动画编辑器
🖼️ 交互展示	产品展示、交互式广告
📱 H5 活动	移动端营销页面

# 安装方式 {#installation}

# 通过 npm {#via-npm}

npm install pixi.js
# 或
yarn add pixi.js
# 或
pnpm add pixi.js

1
2
3
4
5

# 通过 CDN {#via-cdn}

<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.x/dist/pixi.min.js"></script>

# Hello World

一个最简单的 PixiJS 应用：

<!DOCTYPE html>
<html>
<head>
    <title>PixiJS Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/pixi.js@8.x/dist/pixi.min.js"></script>
</head>
<body>
<script>
(async () => {
    const app = new PIXI.Application();
    await app.init({ width: 400, height: 300 });
    document.body.appendChild(app.canvas);

    const text = new PIXI.Text('Hello PixiJS!', {
        fill: 0xff6600,
        fontSize: 36,
        fontWeight: 'bold'
    });
    text.anchor.set(0.5);
    text.x = app.screen.width / 2;
    text.y = app.screen.height / 2;
    app.stage.addChild(text);
})();
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 在线 Demo {#online-demo}

快速入门 →