本文主要是介绍[pixi.js]刚学pixi.js做记录 创建应用 添加图片精灵，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
pixi.js是用于在canvas上绘制2d图像的库，他使用了webGL，可以使用硬件渲染，所以速度很快，可以达到很迅速的绘制效果。
基本引入
首先引入pixi.js 这个直接去官网找就行
pixi.js
在页面中引入:
<script src="../pixi.min.js"></script>这玩意很大，文章版本4.5.5就要411kb（在网页中传输压缩格式108kb）pixi.js 5.0.0版本。
查看你的浏览器是否支持WebGL
let type = "WebGL";if(!PIXI.utils.isWebGLSupported()){type = "canvas";}PIXI.utils.sayHello(type);成功之后会在控制台显示渲染方式
创建canvas视图与舞台
首先创建一个新的pixi应用
let app = new PIXI.Application({backgroundColor:0xff00ffantialias:true,
})
document.body.appendChild(app.view)//app.view是一个canvas对象
上面的代码创建了个新的应用，设置其为透明，并且开启了抗锯齿（此方法只有在谷歌里面是有用的），然后将其视图（canvas元素）加入到了body中，我们可以在浏览器中看到一个背景颜色为紫色的框框
如果还需要设定大小的话则需要在创建的时候加入大小：
let app = new PIXI.Application(200,300,{transparent:true,antialias:true,
})这样的话这个canvas窗口，也就是pixi应用的输出窗口是一个透明的宽度为200，高度为300的canvas元素
设定渲染窗口canvas元素的大小
有时候需要将窗口变得和浏览器窗口一样大，那么就需要设定一下
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);这样绘图的窗口就会铺满整个浏览器了
添加精灵图片
向场景中加入一个精灵图片
PIXI.loader.add("imgs/headIcon.png").load(setup)//加载器加载一张图片并且当加载完毕的时候执行setup函数function setup(){let tow = new PIXI.Sprite(PIXI.loader.resources["imgs/headIcon.png"].texture);tow.anchor.set(0.5);//设定中心锚点为中间tow.x = app.screen.width/2;//将位置设置为中间tow.y = app.screen.height/2;app.stage.addChild(tow);//将精灵贴图放进舞台中
}
在上面的流程之后，可以在浏览器中间看到一张图片
为贴图添加简单的动画效果
在setup函数中加入：
app.ticker.add(function(delta) {//delta为增量时间tow.rotation += 0.1 * delta;
});这个函数中的delta是增量时间，在机器表现良好，运行流畅的时候接近1，如果机器明显卡顿，增量时间将明显大于1，旋转的速度是基于真实时间的，这样可以避免在明显卡顿的情况 下画面渲染延迟的问题
这篇关于[pixi.js]刚学pixi.js做记录 创建应用 添加图片精灵的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
