canvas渲染模式

2021-10-19 21:00:15 字數 1077 閱讀 2240

canvas有三種渲染模式可供選擇,分別是overlay,camera,world

其中overlay為覆蓋模式,即永遠最後渲染,覆蓋其他物體和ui。camera為相機模式,渲染順序依據相機。world為世界模式,並不因相機而改變,至於距離有關。

實際工程中,我們會運用多個canvas,那麼各種模式下渲染順序又是如何?

第一種情況,當有多個canvas並且渲染模式都為overlay。

這種情況下,渲染順序是由canvas元件下的sort order決定的,值越大的越後渲染。

第二種情況,當有多個canvas並且渲染模式都為camera。

這種情況下,渲染順序首先由rendener camera的depth值決定,值越大越後渲染。

如果depth值相同,那麼由canvas元件下的sortint layer順序決定,順序越後則越後渲染。

如果depth值和layer值都相同的情況下,渲染順序由order in layer決定,值越大越後渲染。

(注意:若rendener camera都是同乙個攝像機,則不考慮depth情況)

第三種情況,當有多個canvas並且渲染模式都為world。

這種情況下,渲染順序由canvas元件下的sortint layer順序決定,順序越後則越後渲染。

如果layer值都相同的情況下,渲染順序由order in layer決定,值越大越後渲染。

特別注意,當layer和order值都相同的情況下,此時渲染順序由canvas距離render camera的距離決定,距離越近越後渲染。(只有world模式有這種情況,因其他模式下canvas都是位置固定不可移動的。並且以上情況只考慮canvas都出現在render camera攝像範圍的情況下。)

第四種情況,當有多個canvas並且渲染模式都存在的情況下。

這種情況下,首先overlay模式的canvas永遠是最後渲染,並且同為overlay模式的canvas在sort order的值越大時越後渲染。

其次,camera和overlay同時存在的情況下有兩種情況:若使用的不同的相機,則由攝像機的depth決定,值越大越後渲染。若使用的是相同的相機,則是由canvas距離攝像機的距離決定的,距離越近的越後渲染。

Canvas 渲染模式

1.canvas canvas component 是ui布局和渲染的抽象空間,所有的ui都必須在此元素之下 子物件 簡單來說 canvas 就是渲染 ui 的元件。2.render mode ui渲染的方式,有以下三種 1 screen space overlay 在此模式下不會參照到camera...

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 可選引數,表示繪製這段文字所...