简介
Pixi.js是一个快速的轻量级的2D动画渲染引擎,可以在浏览器里创建出丰富的交互式图形、动画和跨平台的游戏及应用程序等,主打支持硬件GPU渲染的WebGL API,如若浏览器不支持WebGL,Pixi则会回退使用Canvas来进行渲染。
PixiJS的官网地址是:http://www.pixijs.com/
PixiJS的开源地址是:https://github.com/pixijs/pixi.js/tree/master
主要特性
- 真正的跨平台:Pixi.js是一个可以兼容所有设备的超快H5 2D渲染引擎,并且拥有canvas回调功能的WebGL,实现真正的跨平台。
- 交互式多点触控:Pixi不仅支持移动和平板设备,还具有完整的多点触控输入识别,让开发者可以发挥自己的能力去挖掘出它所有的潜力。
- WebGL过滤器:当使用WebGL时,Pixi允许你使用自己熟悉且现有的过滤器。当然,你也可以使用自己创建的独一无二的过滤器,比如自定位移和半色调效果。
- 着色和混合模式:对设计师来说,会很喜欢这个,Pixi.js允许用户着色和使用混合模式就像其他常见的视觉包比如Photoshop或Flash。
- 渲染器自动检测:这个算是Pixi的一大特色,虽然Pixi是主要作为WebGL 2D渲染器而创建的,但仍支持非WebGL平台。其解决方案就是创建一个Canvas回调系统,只需一次编码,Pixi就可无缝管理回调。
- 简易API:设计直观,易于上手。
- 资源加载:精灵表单、图形、字体和动画数据等都可通过Pixi.js来加载和处理。
- 支持精灵表单(Sprite sheet)。
举个例子
下面是一个简单的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="libs/pixi.min.js"></script> <script> var app = new PIXI.Application(800, 600, { backgroundColor : 0x92edfb, // 背景是否设为透明 transparent: false }); // 将canvas添加到页面中 document.body.appendChild(app.view); // 创建一个图片精灵 var sun = PIXI.Sprite.fromImage('img/sun.ico'); // 设置精灵中心位置 sun.anchor.set(0.5); // 设置精灵在x轴/y轴的位置 sun.x = app.renderer.width / 2; sun.y = app.renderer.height / 2; // 将精灵添加到舞台 app.stage.addChild(sun); // 动画更新渲染的监听函数 app.ticker.add(function(delta) { sun.rotation += 0.01 * delta; }); </script> </body> </html>
效果:舞台上绘制了800px*600px的画布,画布中的图片精灵sun在中心位置旋转。