創建畫布

昨天已經將pixi引入了，今天就把pixi建立起來吧！

View

首先就需用到pixi.application方法創建畫布(也就是view)，而創建之後會產生幾個成員

• loader
• renderer
• stage
• ticker
• view

如以下就會創建出寬256px、高256px的<canvas>畫布(也就是view)：

//Create a Pixi Application
  let app = new PIXI.Application({width: 256, height: 256})

//Add the canvas that Pixi automatically created for you to the HTML document
  document.body.appendChild(app.view)

創建畫布時，可以對option對象進行渲染參數設置，以下為pixi.application常用參數：
名稱 | 類別 | 描述
------------- | -------------
width | Number | 畫布寬度，預設800，單位像素
height | Number | 畫布高度，預設600，單位像素
antialias | Booleen | 反鋸齒，預設false，可以使字體邊界及圖形邊界更加圓滑
transparent | Booleen | 透明度，預設false
backgroundColor | Number | 背景色，預設0x000000，範圍0x000000~0xffffff
preserveDrawingBuffer | Booleen | 預設false，如需將canvas儲存下載，使用HTMLCanvasElement.toDataURL()，必須設定為true，否則則會是黑黑一片

要看更多pixi.application屬性可以看官網的介紹

Renderer

有兩種渲染器

• PIXI.WebGLRenderer，使用 WebGL 運算畫面
• PIXI.CanvasRenderer，使用 canvas 運算畫面

pixi.application在初始化時會自動判斷瀏覽器的支援度，而去判別使用WebGL或是Canvas渲染畫面，預設是WebGL，而pixi.application有一個參數forceCanvas如設置為true，則會強迫使用canvas

預設的渲染就會使用pixi.application預設的參數渲染，如果在創建之後要修改就可以使用renderer，如以下就是重新渲染畫布背景色：

app.renderer.backgroundColor = 0x061639

如果想要修改畫布寬高

app.renderer.autoResize = true
app.renderer.resize(512, 512)

也可以使用css屬性，如以下將畫布全螢幕

app.renderer.view.style.position = "absolute"
app.renderer.view.style.display = "block"
app.renderer.autoResize = true
app.renderer.resize(window.innerWidth, window.innerHeight)

要看更多pixi.renderer屬性可以看官網的介紹

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://github.com/kittykatattack/learningPixi#introduction
[2]https://ithelp.ithome.com.tw/articles/10191101
[3]http://pixijs.download/release/docs/PIXI.Application.html