[pixi.js]刚学pixi.js做记录 创建应用 添加图片精灵

本文主要是介绍[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做记录 创建应用 添加图片精灵的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---