iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 20
0
Modern Web

菜雞用Canvas/Pixi動動動動動起來系列 第 20

【Day20】Pixi-創建畫布 View/Renderer

創建畫布

昨天已經將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


上一篇
【Day19】Pixi-介紹及安裝
下一篇
【Day21】Pixi-Stage/Container
系列文
菜雞用Canvas/Pixi動動動動動起來30

1 則留言

0
angelliya00
iT邦新手 4 級 ‧ 2020-10-04 00:42:23

感謝引用 XD

你寫的太好了XD

我要留言

立即登入留言