前言
Pixi.js使用WebGL，是一个超快的HTML5 2D渲染引擎。作为一个Javascript的2D渲染器，Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。提供无缝 Canvas 回退，支持主流浏览器，包括桌面和移动。 Pixi渲染器可以使开发者享受到硬件加速，但并不需要了解WebGL。
准备工作
1. 创建一个vue项目，这里就不做过多讲述，如果不了解请参考https://www.cnblogs.com/xuchangqi1/p/9561206.html
2. 编辑App.vue文件，代码如下
<template> <div id="app"> <div id="pixi" style="z-index:-1;"> </div> </div> </template> <script> import logo from '@/assets/logo.png' export default { name: 'App', data(){ return{ v_appWi:0, v_appHi: 0 }; }, components: { }, methods: { init_pixi() { let app = new PIXI.Application(this.v_appWi, this.v_appWi, { backgroundColor: 0x1099bb }); document.getElementById("pixi").appendChild(app.view); // create a new Sprite from an image path var bunny = PIXI.Sprite.fromImage(logo); // center the sprite's anchor point bunny.anchor.set(0.5); // move the sprite to the center of the screen bunny.x = app.screen.width / 2; bunny.y = app.screen.height / 2; app.stage.addChild(bunny); // Listen for animate update app.ticker.add(function(delta) { // just for fun, let's rotate mr rabbit a little // delta is 1 if running at 100% performance // creates frame-independent transformation bunny.rotation += 0.1 * delta; }); } }, mounted: function() { if (browser.versions.mobile && !browser.versions.iPad) { this.v_appWi = document.getElementById("pixi").offsetWidth; } else { this.v_appWi = Math.min(600, document.getElementById("pixi").offsetWidth); } this.init_pixi(); }, } </script>
3.编辑index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script src="//cdn.bootcss.com/pixi.js/4.8.0/pixi.min.js"></script> <title>games</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> <script type="text/javascript"> var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器 iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部 }; } (), language: (navigator.browserLanguage || navigator.language).toLowerCase() } let type = "WebGL" if(!PIXI.utils.isWebGLSupported()){ type = "canvas" } PIXI.utils.sayHello(type) </script> </body> </html>
最后启动项目,会发现图片会一直转动
最后附上一个链接，里面有更多的demo，有兴趣可以去看一下https://pixijs.io/examples/#/spine/pixie.js
8月ECS限量抢，全场ECS 2折起，数量有限，先到先得，抢完为止。https://www.aliyun.com/