指南 | 教程 | 示例 | API 文档 | Discord | Bluesky | 𝕏

PixiJS ⚡️

下一代、最快的 HTML5 网络创作引擎

• 🚀 WebGL 与 WebGPU 渲染器
• ⚡️ 无与伦比的性能与速度
• 🎨 易于使用，但功能强大的 API
• 📦 资源加载器
• ✋ 完整的鼠标与多点触控支持
• ✍️ 灵活的文本渲染
• 📐 多功能的基本图形和 SVG 绘制
• 🖼️ 动态纹理
• 🎭 遮罩
• 🪄 强大的滤镜
• 🌈 高级混合模式

PixiJS 是可用于网络的最快、最轻量的 2D 库，适用于所有设备，使你能够使用 WebGL 和 WebGPU 创建丰富的交互式图形和跨平台应用程序。

安装

使用 PixiJS 入门很简单！只需使用我们的 PixiJS Create CLI，通过一条命令即可完成设置:

npm create pixi.js@latest

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

npm install pixi.js

使用

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 项目的一部分吗？太好了！欢迎所有人加入！我们一起会更快到达目标 :) 无论你是发现了一个 bug、提出了一个很棒的新功能需求，还是想从上面的路线图中承担一个任务，都可以随时联系我们。

在提交更改之前，请确保阅读 贡献指南。

许可证

此内容根据 MIT 许可证 发布。

更新日志

发布

支持

我们热衷于使 PixiJS 成为最好的图形库。我们的奉献源于对项目和社区的热爱。如果你想支持我们的工作，请考虑向我们的开放基金捐助。