您的位置：首页 > Web前端 > JavaScript

H5 2D渲染引擎—Pixi.js简介及小demo

2017-08-30 11:22 786 查看

简介

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在中心位置旋转。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航