前言
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/