Pixi.js是一個用JavaScript寫的2D渲染引擎，可以用來在瀏覽器里做交互圖形、動畫和游戲等的“富視覺”應用，主打支持硬件GPU渲染的WebGL API，如瀏覽器不支持WebGL，Pixi則會退用HTML5 Canvas來渲染。 Pixi主要負責渲染畫面，很多其它功能開發者得自己寫或搭配其它庫來使用，如用來開發網頁游戲的Phaser框架就是使用Pixi來做渲染。下面內容選自Learning Pixi.js一書，可以來小試一下Pixi。

備注：例子中的JavaScript用的是ES6，var 變成 let， function（）{} 變成 () => {}。

制作精靈（sprites)

Pixi中的基礎建造模塊是一個叫做sprite的對象。 sprite就是可以用代碼控制的圖形。 你可以控制它們的位置、尺寸和一些其他屬性，用以制作交互和動畫圖形。學習如何制作和控制sprite確是學習使用Pixi最重要的事情，如果你知道如何制作和顯示sprite，你就離開始制作游戲或者其他任何一種交互程序只有一小步的距離了。

本章， 你將學習在Pixi的Canvas中顯示和定位sprite所需的必備知識，包括下列內容：

如何制作root container（根容器），叫做stage（舞臺）

如何新建一個renderer（渲染器）

使用加載器加載圖形到Pixi的紋理緩存中（texture cache）

使用加載后的圖形包括tilesets和texture atlases，制作sprite

在開始制作sprite之前，讓我們來創建一個用于顯示它們的類似長方形的屏幕。

創建renderer和stage

Pixi有一個渲染器對象（renderer）給你用來創建一個顯示屏幕。它會自動生成一個HTML <canvas> 元素并解決在canvas里顯示你的圖像的問題，但是你還得另外創建一個叫stage的Pixi容器對象（別擔心，一會兒你就知道到底什么是容器對象和為什么需要它們了）。這個stage對象將被當作一個根容器（root container），用于顯示我們需要Pixi顯示的所有東西。下面是創建一個renderer和stage的代碼，將這些代碼加入你的HTML文檔的<script> 標簽之間:

//Create the renderer 創建一個渲染器let renderer = PIXI.autoDectectRenderer(256, 256);//Add the canvas to the HTML document 在HTML文檔中加入canvasdocunment.body.appendChild(renderer.view);//Create a container object called the 'stage' 創建一個叫stage的容器對象let stage = new PIXI.Container();//Tell the 'renderer' to 'render' the 'stage' 告訴渲染器去渲染一個舞臺renderer.render(stage);

這就是開始使用Pixi所需的最基礎的代碼，它生成了一個256像素 X 256像素大小的黑色canvas元素，并將之添加到HTML文檔中

這個簡單的黑色方塊應該給你小小的心靈帶來純純的愉悅！那是因為要讓Pixi開始顯示內容，這既是首要的一步，也是最重要的一步，讓我們仔細分解這些代碼的功用。

渲染選項

Pixi的autoDetectRenderer方法會根據可用狀態，自動選擇是使用Canvas API還是WebGL去渲染圖像。

let renderer = PIXI.autoDetectRenderer(256, 256);

上面代碼的第一個和第二個參數分別表示canvas畫布的寬和高。 然而還可以加入第三個可選的參數供你并設一些附加值，這第三參數是一個對象直接量，下面代碼就是設置渲染器抗鋸齒、透明和分辨率的示例：

renderer = PIXI.autoDetectRenderer(
 256, 256,
 { antialias: false, transparent: false, resolution: 1 }
);

用不用第三參數是可選的，如果你滿意Pixi的缺省值就不用管它，一般來說都不用改。但最好了解這些設置有哪些用處，抗鋸齒（antialias）可以使字體和圖形的邊緣變得平滑（WebGL的anti-aliasing還沒有適用于所有平臺，所以最好在你的應用平臺上測試此功能）。透明選項可以使canvas的背景變為透明。分辨率選項使得匹配不同分辨率和像素密度變得更容易，一般設置為1就可應對多數項目，更多關于分辨率匹配的信息請參見第六章。

提示 該渲染器還有另一個第四選項叫做preserveDrawingBuffer，缺省值為false。唯一需要設置它為true的情況是：在WebGL上下文情境中調用一個Pixi的特殊方法dataToURL。如果你需要將一個Pixi的canvas轉化為一個HTML圖片對象時，你可能不得不這么做。

Pixi的autoDetectRenderer將決定使用canvas繪圖接口還是WebGL來顯示圖像。缺省是WebGL，這是好的，因為WebGL特別的快而且能使用很多引人入勝的特效，這些你都能在本書后面學到。但是如果你想強制使用canvas繪圖接口而不是
WebGL，你可以這么寫:

renderer = new PIXI.CanvasRenderer(256, 256);

上面的情況只需要頭兩個參數：寬和高。

你也可以強制使用WebGL渲染器，如下所示：

renderer = new PIXI.WebGLRenderer(256, 256);

現在我們再來看看如何增強渲染器的外表

定制canvas

renderer.view對象只是一個普通平常的<canvas>對象，所以你可以象控制其它任何canvas對象那樣控制它，下面的代碼給canvas加了一圈虛線邊框：

renderer.view.style.border = "1px dashed black";

如果新建canvas之后，你需要改變它的背景顏色，那就給渲染器對象的backgroundColor設置任何十六進制顏色值即可，下面的代碼給了一個純白色的背景：

renderer.backgroundColor = 0xFFFFFF;

提示 網上可以搜索到很多十六進制配色表，你可以很容易選擇一個合適的背景色。

如果你想知道渲染器的寬和高，使用renderer.view.width和renderer.view.height即可。

要改變canvas的大小，使用渲染器的resize()方法，然后應用新的寬高值，如下所示：

renderer.resize(512, 512);

如果想讓canvas充滿整個窗口，你可以使用如下CSS樣式：

renderer.view.style.position = "absolute";
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.viwe.sytle.display = "block";

注意，如果要這么做，你必須還得將所有HTML元素的padding和margin值都設為0， 如下所示：

<style>* {padding: 0; margin:0} </style>

(上面的*號是CSS里的通配選擇器，就是指所有標簽)如果沒有上面這條CSS樣式，你可能會發現在Pixi畫布與瀏覽器邊緣之間有幾像素的空隙。

相信看了這些案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

相關閱讀：

JS模塊化-RequireJS

在vue首頁怎樣做出底部導航TabBar

一個用Vue.js 2.0+做出的石墨文檔樣式的富文本編輯器

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com