pixijs 绘制 WebGL,Canvas
最后更新于:2022-04-02 03:11:49
[TOC]
> [example](https://pixijs.io/examples-v4/#/demos-basic/container.js)
> [github](https://github.com/pixijs)
> [doc](http://pixijs.download/release/docs/index.html)
## 概述
- 该项目的目的是提供一种适用于所有设备的快速轻量级2D库
- PixiJS渲染器使每个人都可以享受硬件加速的强大功能,而无需WebGL的先验知识
特点:92
* WebGL渲染器(具有自动智能批处理功能,可实现真正的快速性能)
* 画布渲染器(镇上最快的渲染器!)
* 全场景图
* 超级易用的API(类似于Flash显示列表API)
* 支持纹理图集
* 资产装载器/精灵表装载器
* 自动检测应使用哪个渲染器
* 全鼠标和多点触控交互
* 文本
* BitmapFont文字
* 多行文字
* 渲染纹理
* 原始图
* 掩蔽
* 筛选器
## hello world
```
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;
});
});
```
';