Canvas

画布

The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of such a Canvas.

Creating a new UI element, such as an Image using the menu GameObject > UI > Image, automatically creates a Canvas, if there isn’t already a Canvas in the scene. The UI element is created as a child to this Canvas.

The Canvas area is shown as a rectangle in the Scene View. This makes it easy to position UI elements without needing to have the Game View visible at all times.

Canvas uses the EventSystem object to help the Messaging System.

Canvas是一块区域，所有的UI元素都应该在里面。Canvas就是一个GameObject挂载了一个Canvas组件，所有的UI元素都必须是Canvas的子节点。

如果场景中不存在Canvas，创建一个新的UI元素，例如从GameObject > UI > Image创建一个Image，会自动创建一个Canvas。创建的UI元素会成为这个Canvas的子节点。

Canvas区域在视图场景中显示为一个矩形。这样不需要通过Game视图也可以很容易地摆放UI元素。

Canvas 使用EventSystem对象来帮助消息系统

Draw order of elements

元素的绘制顺序

UI elements in the Canvas are drawn in the same order they appear in the Hierarchy. The first child is drawn first, the second child next, and so on. If two UI elements overlap, the later one will appear on top of the earlier one.

To change which element appear on top of other elements, simply reorder the elements in the Hierarchy by dragging them. The order can also be controlled from scripting by using these methods on the Transform component: SetAsFirstSibling, SetAsLastSibling, and SetSiblingIndex.

Canvas中UI元素的绘制顺序与其在Hierachy中的顺序相同。第一个元素先绘制，然后第二个，依次绘制。如果2个元素重叠了，后面绘制的会显示在先绘制的上面。

通过简单地拖拽Hierarchy中的元素，可以改变元素的绘制顺序。想要用代码改变元素的顺序，可以使用Transform组件中的SetAsFirstSibling、SetAsLastSibling、SetSiblingIndex方法。

Render Modes

渲染模式

The Canvas has a Render Mode setting which can be used to make it render in screen space or world space.

Canvas可以设置渲染模式，让他渲染在屏幕空间或者世界空间

Screen Space - Overlay

屏幕空间--覆盖

This render mode places UI elements on the screen rendered on top of the scene. If the screen is resized or changes resolution, the Canvas will automatically change size to match this.

这种渲染模式把UI放在场景的上方。如果屏幕调整大小或者改变分辨率，Canvas会自动改变它的大小来匹配（意思也就是Canvas的大小永远和屏幕一样大）

UI in screen space overlay canvas

Screen Space - Camera

屏幕空间--相机

This is similar to Screen Space - Overlay, but in this render mode the Canvas is placed a given distance in front of a specified Camera. The UI elements are rendered by this camera, which means that the Camera settings affect the appearance of the UI. If the Camera is set to Perspective, the UI elements will be rendered with perspective, and the amount of perspective distortion can be controlled by the Camera Field of View. If the screen is resized, changes resolution, or the camera frustum changes, the Canvas will automatically change size to match as well.

这个模式和前面的覆盖模式很像，不过在这种渲染模式下，Canvas放在一个指定相机的固定距离前。UI元素被相机渲染，这意味着相机的设置会影响到UI的表现。如果相机设置为透视的，UI元素会被透视渲染，透视变形的程度可以被相机的视野控制。如果屏幕调整大小或分辨率或者改变相机的视锥体，Canvas会自动改变大小去匹配

UI in screen space camera canvas

World Space

世界空间

In this render mode, the Canvas will behave as any other object in the scene. The size of the Canvas can be set manually using its Rect Transform, and UI elements will render in front of or behind other objects in the scene based on 3D placement. This is useful for UIs that are meant to be a part of the world. This is also known as a “diegetic interface”.

在这种渲染模式下，Canvas会像场景中的其他物体一样。Canvas的尺寸可以在RectTransform中手动设置，根据3D空间中的位置，UI元素会渲染在其他物体的前面或后面。这对属于世界的一部分的UI很有用。这个也被称为“剧情界面“

UI in world space canvas