当前位置：首页 > 软件库 > Web应用开发 > HTML5开发相关 >

Pixi.js

超快的 HTML5 2D 渲染引擎

授权协议 MIT

开发语言 JavaScript

所属分类 Web应用开发、 HTML5开发相关

软件类型开源软件

地区不详

投递者庄博厚

操作系统跨平台

开源组织无

适用人群未知

软件官网

软件文档

官方下载

软件概览

PixiJS 提供一个适用于所有设备的快速轻量级2D库。 PixiJS 渲染器允许每个人在不事先了解WebGL的情况下享受硬件加速的强大功能。而且它很快、真的很快，适合创建丰富的交互式图形，跨平台应用程序和游戏。

PixiJS具有完整的WebGL支持，并且可以无缝地回退到 HTML5 的画布。作为一个框架，PixiJS是用于创作交互式内容的绝佳工具，尤其是近年来远离Adobe Flash。将它用于图形丰富的交互式网站，应用程序和HTML5游戏。开箱即用的跨平台兼容性和优雅的降级意味着您可以减少工作量并享受更多乐趣！如果你想要相对快速地创建精美和精致的体验，而不是深入研究密集的低级代码，同时避免浏览器不一致的麻烦，那么请将你的下一个项目用一些PixiJS魔法！

基本使用示例：

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new PIXI.Application();

// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.view);

// load the texture we need
app.loader.add('bunny', 'bunny.png').load((loader, resources) => {
    // This creates a texture from a 'bunny.png' image
    const bunny = new PIXI.Sprite(resources.bunny.texture);

    // Setup the position of the bunny
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    // Rotate around the center
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    // Add the bunny to the scene we are building
    app.stage.addChild(bunny);

    // Listen for frame updates
    app.ticker.add(() => {
         // each frame we spin the bunny around a bit
        bunny.rotation += 0.01;
    });
});

下面是一些在线的演示：

更多实例请看 http://pixijs.github.io/examples/

使用案例

Pixi.JS——JavaScript面向对象项目

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
pixi.js 5.0_使用Pixi.js进行高级绘图

pixi.js 5.0 Stars, bursts, gears, wedges, polygons, arcs, and dashes all drawn using Pixi.js, the HTML5 creation engine with the fastest, most flexible 2D WebGL renderer. 使用Pixi.js(具有最快，最灵活的2D WebGL渲染
PIXI.JS一镜到底动画

一、创建程序创建一个程序，并把程序添加到DOM结构中 const app = new PIXI.Application({ width: 750, height: 1448 }); doucument.body.appendChild(app.view) 二、加载器用于预加载项目中所需要的所有资源，是一个提供了用于异步加载图像和音频文件等资源的工具。 //加载器 const loa

Pixi.js

同类工具

相关阅读

相关文章

相关问答

相关文档