Skip to content

Canvas

image-20260710111858806image-20260710112115554

Unity_Canvas_Complete_Summary

Canvas 是什么

Canvas 是 Unity UI 的根画布。 按钮、图片、文字、血条、菜单、背包界面等 UI 元素,通常都要放在 Canvas 下面。

结构可以理解为:

c
Canvas GameObject
├── Rect Transform      控制 UI 区域的位置、大小、锚点
├── Canvas              控制 UI 如何渲染到屏幕或场景
├── Canvas Scaler       控制 UI 如何适配不同分辨率
└── Graphic Raycaster   控制 UI 能不能被鼠标/触摸点到

对象头部

Inspector 最上面这一块表示 Canvas 本身是一个 GameObject

  • 勾选框:启用或禁用整个 Canvas 对象。
  • Name:对象名称,截图里是 Canvas
  • Tag:标签,用于查找或分类。
  • Layer:图里是 UI,方便相机、射线或代码按层过滤。

Rect Transform

Rect Transform 是 UI 专用的 Transform。 普通物体主要用 Transform,UI 元素主要用 Rect Transform

它控制:

  • Position:UI 矩形中心位置。
  • Width / Height:UI 区域宽高。
  • Anchor Min / Max:锚点,决定 UI 跟随父级哪一部分。
  • Pivot:中心点,影响旋转、缩放和定位。
  • Rotation / Scale:旋转和缩放。

你截图里类似:

c
Width = 1080
Height = 1920
Position X = 540
Position Y = 960

可以理解为:这是一个 1080 x 1920 的竖屏 UI 区域,中心点在 (540, 960)

Some values driven by Canvas 的意思是: 根 Canvas 的部分位置和大小由 Canvas 自动控制,不建议像普通物体那样随便改。

Canvas 组件

Canvas 组件决定 UI 怎么被渲染。

Render Mode 有三种:

c
Screen Space - Overlay
Screen Space - Camera
World Space

Screen Space - Overlay

UI 直接覆盖在屏幕最上层,不需要摄像机。适合普通 HUD、菜单、按钮、背包界面。

在此模式下,画布被缩放以适应屏幕,然后直接渲染,无需参照场景或摄像机(即使场景中没有摄像机,UI也会被渲染)。如果屏幕尺寸或分辨率被更改,界面会自动重新调整比例以适应。UI会覆盖在其他图形上,比如摄像机视角。

image-20260713210258692

Screen Space - Camera

UI 由指定相机渲染。会多出 Render CameraPlane Distance。适合需要相机效果、排序或和场景深度配合的 UI。

在此模式下,画布被渲染成仿佛绘制在距离某摄像机前方的平面物体上。界面的屏幕大小不会随距离变化,因为它总是被重新缩放以完全符合摄像机视锥。如果屏幕尺寸、分辨率或摄像机视锥发生变化,界面会自动重新缩放以适应。场景中任何靠近摄像机而非UI平面的3D物体都会被渲染在UI前面,而平面后方的物体会被遮挡。

image-20260713210321872

World Space

UI 像 3D 物体一样放在场景中。适合头顶血条、NPC 对话框、3D 面板、场景中的操作屏幕。

这个模式会把界面渲染成像场景中的平面对象。但与屏幕空间——摄像机模式不同,飞机不必面向摄像机,可以根据你的喜好调整方向。画布的大小可以通过其矩形变换(Rect Transform)设置,但屏幕上的大小取决于摄像机的视角和距离。其他场景对象可以穿过画布的后方、穿过或前方。

image-20260713210350017

Canvas 里其他常见字段:

  • Pixel Perfect:让 UI 尽量对齐像素网格,像素风 UI 可能更清晰,新手默认关闭即可。
  • Sort Order:多个 Canvas 的显示顺序,数字越大越晚渲染,越盖在上面。
  • Target Display:显示到哪个屏幕。你截图是 Display 2,普通单屏游戏一般用 Display 1
  • Additional Shader Channels:给特殊 UI Shader 传额外数据,新手保持 Nothing 即可。

Canvas Scaler

Canvas Scaler 控制 UI 在不同分辨率下怎么缩放。

UI Scale Mode 有三种:

Constant Pixel Size: 固定像素大小。你截图当前是这个。屏幕变大时,UI 不会自动按比例适配。

Scale With Screen Size: 按参考分辨率适配屏幕。正式游戏 UI 最常用,也更推荐新手使用。

Constant Physical Size: 尽量保持真实物理尺寸,比如厘米、英寸。依赖设备 DPI,普通游戏较少用。

新手推荐:

c
UI Scale Mode = Scale With Screen Size
Reference Resolution = 1920 x 1080

如果是竖屏手游,也可以设:

c
Reference Resolution = 1080 x 1920

Graphic Raycaster

Graphic Raycaster 负责 UI 点击检测。

按钮、滑块、输入框能被鼠标或手指点到,离不开它。 它通常要配合场景里的 EventSystem 一起工作。

常见选项:

  • Ignore Reversed Graphics:忽略背面朝向的 UI 图形,普通 2D UI 一般保持开启。
  • Blocking Objects:决定 2D / 3D 物体是否能挡住 UI 点击。
  • Blocking Mask:当启用阻挡时,决定哪些 Layer 可以挡住 UI 射线。

如果按钮点不到,优先检查:

c
Canvas 上有没有 Graphic Raycaster
场景里有没有 EventSystem
Button / Image 的 Raycast Target 是否开启
有没有其他透明 UI 挡在按钮上面

截图里最重要的设置

c
Render Mode = Screen Space - Overlay
Target Display = Display 2
UI Scale Mode = Constant Pixel Size

其中最容易出问题的是 Target Display = Display 2。 如果你的 Game 视图或实际运行窗口在 Display 1,UI 可能看不到。

普通单屏游戏界面推荐:

c
Render Mode = Screen Space - Overlay
Target Display = Display 1
UI Scale Mode = Scale With Screen Size
Reference Resolution = 1920 x 1080

一句话总结:

Canvas 管“UI 画在哪里、怎么缩放、怎么被点到”;真正显示内容的是 Canvas 下面的子 UI 元素,比如 Button、Image、TextMeshPro。

文章评价

读完这篇,留下你的看法

暂无审核通过的评价。

登录账号后才能评价。

本站访客数0总站访问量0本页访问量0