Canvas 渲染模式

2022-07-22 14:48:26 字數 891 閱讀 7322

1. canvas

canvas component 是ui布局和渲染的抽象空間,所有的ui都必須在此元素之下(子物件),簡單來說 canvas 就是渲染 ui 的元件。

2. render mode

ui渲染的方式,有以下三種:

1).screen space – overlay

在此模式下不會參照到camera,ui直接顯示在任何圖形之上。

pixel perfect:可以使影象更清晰,但是有額外的效能消耗,如果在有大量ui動畫的時候,可能會有卡頓。

sort order:深度值,該值越高越接近前面。

2).screen space – camera 

使用乙個camera作為參照,將ui平面放置在camera前的一定距離,因為是參照camera,如果螢幕大小、解析度、camera視錐改變時ui平面會自動調整大小。如果scene中的物件(game object)比ui平面更靠近攝像機,就會遮擋到ui平面。

render camera:用於渲染的攝像機

plane distance:與camera的距離

sorting layer:canvas屬於的排序層,在 edit->project setting->tags and layers->sorting layers 進行新增,越下方的層顯示越前面。

order in layer:canvas屬於的排序層下的順序,該值越高越靠前。

3). world space

把物體當作世界座標中的平面(game object),也就是當作3d物件,顯示示3d ui。

event camera:處理ui事件(click、drag)的camera,所設定的camera才能觸發事件。

canvas渲染模式

canvas有三種渲染模式可供選擇,分別是overlay,camera,world 其中overlay為覆蓋模式,即永遠最後渲染,覆蓋其他物體和ui。camera為相機模式,渲染順序依據相機。world為世界模式,並不因相機而改變,至於距離有關。實際工程中,我們會運用多個canvas,那麼各種模式下...

Canvas文字渲染

context.font 文字樣式 default 20px sans serif font包含 font style normal 預設 italic 斜體字 oblique 傾斜體字 font variant normal 預設 small caps 小型大寫字母代替小寫字母 font weig...

Canvas文字渲染

font屬性可以接收像css裡面font屬性一樣的字串 粗體 40px 字型 context.font bold 40px arial param string 想要書寫的字串 param x 字串的位置x座標 param y 字串的位置y座標 param maxlen 可選引數,表示繪製這段文字所...