PixiJS一个丰富的交互式图形的HTML5的2D库

PixiJS logo

PixiJS ⚡️

新一代、速度最快的 Web HTML5 创建引擎

  • 🚀 WebGLWebGPU 渲染器
  • ⚡️ 无与伦比的性能和速度
  • 🎨 易于使用且功能强大的 API
  • 📦 资源加载器
  • ✋ 全面支持鼠标和多点触控
  • ✍️ 灵活的文本渲染
  • 📐 灵活的图元和 SVG 绘制
  • 🖼️ 动态纹理
  • 🎭 蒙版
  • 🪄 强大的滤镜
  • 🌈 高级混合模式

PixiJS 是 Web 上速度最快、最轻量的 2D 库,
可跨所有设备运行,并允许您使用 WebGL 和 WebGPU 创建丰富的交互式图形和跨平台应用程序。

安装

PixiJS 入门非常简单!只需使用我们的 PixiJS Create CLI,一条命令即可完成安装:

Screenshot from terminal

复制代码
npm create pixi.js@latest

或者将其添加到现有项目中:

复制代码
npm install pixi.js

用法

typescript 复制代码
import { Application, Assets, Sprite } from 'pixi.js';

(async () =>
{
    // Create a new application
    const app = new Application();

    // Initialize the application
    await app.init({ background: '#1099bb', resizeTo: window });

    // Append the application canvas to the document body
    document.body.appendChild(app.canvas);

    // Load the bunny texture
    const texture = await Assets.load('https://pixijs.com/assets/bunny.png');

    // Create a bunny Sprite
    const bunny = new Sprite(texture);

    // Center the sprite's anchor point
    bunny.anchor.set(0.5);

    // Move the sprite to the center of the screen
    bunny.x = app.screen.width / 2;
    bunny.y = app.screen.height / 2;

    app.stage.addChild(bunny);

    // Listen for animate update
    app.ticker.add((time) =>
    {
        // Just for fun, let's rotate mr rabbit a little.
        // * Delta is 1 if running at 100% performance *
        // * Creates frame-independent transformation *
        bunny.rotation += 0.1 * time.deltaTime;
    });
})();

贡献

想成为 PixiJS 项目的一员吗?太好了!欢迎所有人!我们会更快地达成目标 :) 无论您发现了错误、有很棒的功能请求,还是想从上面的路线图中承担一项任务,
都请随时联系我们。

提交更改之前,请务必阅读贡献指南

许可证

本内容遵循MIT 许可证发布。

变更日志

发布

支持

我们热衷于将 PixiJS 打造为最好的图形库。我们的奉献精神源于我们对项目和社区的热爱。如果您想支持我们的努力,请考虑为我们的开放社区做出贡献。

关于项目

PixiJS 是网络上最快、最轻量的 2D 库,可在所有设备上运行,并允许您使用 WebGL 和 WebGPU 创建丰富的交互式图形和跨平台应用程序。
MIT
Javascript
45,849
4904
984
2013-01-22
2025-10-07

增长趋势 - stars