pixijs 绘制 WebGL,Canvas

[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; }); }); ```