# Canvas渲染原理筆記
https://www.arkaistudio.com/blog/2016/03/25/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87-%E4%B8%80%EF%BC%9Acanvas/

使用環境 與 版本
Window 7
Unity 5.2.4

## Canvas
Canvas Component 是UI布局和渲染的抽象空間，所有的UI都必須在此元素之下(子物件)，簡單來說 Canvas 就是渲染 UI 的組件

Render Mode
UI渲染的方式，有以下三種

**Screen Space – Overlay：螢幕空間 – 覆蓋
Screen Space – Camera：螢幕空間 – 攝影機
World Space：世界座標空間**

Screen Space – Overlay
Screen Space - Overlay

在此模式下不會參照到Camera，UI直接顯示在任何圖形之上

Pixel Perfect：可以使圖像更清晰，但是有額外的性能開銷，如果在有大量UI動畫時，動畫可能會不平順
Sort Order：深度值，該值越高顯示越前面

Screen Space – Camera
Screen Space - Camera

使用一個Camera作為參照，將UI平面放置在Camera前的一定距離，因為是參照Camera，如果螢幕大小、分辨率、Camera視錐改變時UI平面會自動調整大小。如果Scene中的物件(GameObject)比UI平面更靠近攝影機，就會遮擋到UI平面。

Render Camera：用於渲染的攝影機
Plane Distance：與Camera的距離
Sorting Layer：Canvas屬於的排序層，在 Edit->Project Setting->Tags and Layers->Sorting Layers 進行新增，越下方的層顯示越前面
Order in Layer：Canvas屬於的排序層下的順序，該值越高顯示越前面

World Space
World Space

把物體當作世界座標中的平面(GameObject)，也就是當作3D物件，顯示3D UI

Event Camera：處理UI事件(Click、Drag)的Camera，所設定的Camera才能觸發事件

---

https://www.arkaistudio.com/blog/2016/03/28/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87%e4%ba%8c%ef%bc%9acanvas-scaler-%e7%b8%ae%e6%94%be%e6%a0%b8%e5%bf%83/

https://www.arkaistudio.com/blog/2016/05/02/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87%e4%b8%89%ef%bc%9arecttransform/

https://www.arkaistudio.com/blog/2016/05/19/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87%e5%9b%9b%ef%bc%9aevent-system-manager-%e4%ba%8b%e4%bb%b6%e8%88%87%e8%a7%b8%e7%99%bc/

https://www.arkaistudio.com/blog/2016/06/19/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87%e4%ba%94%ef%bc%9aauto-layout-%e8%87%aa%e5%8b%95%e4%bd%88%e5%b1%80/