建立 canvas

今天開始我們一步步來看怎麼使用 PixiJS 吧！

在開始之前，要先提醒各位需要先運行 webserver ，否則將會遇到一些奇怪的問題喔！

最基本的 canvas 畫布是肯定需要的，Pixi 提供了 PIXI.Application 建構式方便我們建立。

let app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});

document.body.appendChild(app.view);

PIXI.Application 在被建立同時也會自動建立 renderer, ticker 和 root container。

• renderer - 優先使用 WebGL 渲染如果不允許則用 Canvas 渲染
• ticker - 渲染的更新頻率
• stage - PIXI 容器物件，是所有可見物件的根容器

PIXI.Application 會取決於瀏覽器支援程度選擇使用 WebGL 或 Canvas 渲染圖片。

如果想要確認是用 WebGL 還是 Canvas 模式的話，最快速的方式就是打開 console 觀看。

當然也能用程式來判斷：

console.log(PIXI.utils.isWebGLSupported()); // 回傳目前頁面是否支援 WebGL；
console.log(app.renderer.type); // 回傳目前 PixiJS app 的renderer 模式：
                                 // PIXI.RENDERER_TYPE，值為 0、1、2
console.log(PIXI.RENDERER_TYPE); // {UNKNOWN: 0, WEBGL: 1, CANVAS: 2}

而 PIXI.Application 物件可以傳入 options 物件的引數來設定寬、高、背景顏色等等。
想全部了解可以看 官方文件

背景顏色要注意到只能使用「十六進制顏色」，是 0x000000 ~ 0xffffff 數字。

在創立完後透過 document.body.appendChild 添加到 HTML body 後就可以看到說，
一張 canvas 就這樣被輕鬆建立出來了（我覺得這是在廢話...)。

接著，我們來嘗試添加圖片到 canvas 中。

添加圖片

要能讓圖片顯示在 Pixi 的 canvas 中必須把圖片添加進 PIXI 的stage 物件中。
可以這樣使用：

app.stage

在把圖片放進 stage 前，需要先把圖片轉成 Sprite 的特殊圖片物件。

我們能利用程式控制 Sprite 的大小及位置，可以透過下列三種方式建立 Sprite：

1. 單一圖片
2. Sprite 圖片
   這種類型的圖片稱作 Sprite 圖片
   
   圖片來源 : How to build a simple sprite animation in JavaScript
3. texture atlas - 經由 JSON 定義大小和位置的 Sprite 圖片

這邊我們先用單一圖片來簡單講解

let app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
let imageURL = "./image/bunny.png";
let bunny = PIXI.Sprite.fromImage(imageURL);

document.body.appendChild(app.view);
app.stage.addChild(bunny);

我們先用 PIXI.Sprite.fromImage 把圖片轉成 Sprite 物件後，再經由 app.stage.addChild 將圖片顯示在 canvas 上。

原始圖有點小，就擷取一小部分顯示了。

這邊要注意到的是，如果圖片來源使用外部來源像是 imgur 或其他網址的話，會遇到 CORS 跨域問題。

由於本篇是在講解如何使用 PixiJS ，在之後的範例都會採引入本機圖片的方式，對 CORS 有興趣的各位可以看這篇文章的講解喔！
前端菜焦阿日記 |D10| Web Server - 跨域請求

那麼今天就先到這邊，一樣如果有錯誤及來源未附上歡迎留言指正，我們明天見！

參考資料：
Pixi Basics example
Pixi 教程
PixiJS - Day-07 stage、PIXI.Container 與父子結構
Pixi.js 中文教學