Canvas 画布与 UI 基础

🎯本节学习目标

• 理解 Canvas 作用
• 掌握三种渲染模式
• 掌握 Canvas Scaler

🚀课程导读

所有 UI（按钮、文字、血条）都必须放在 Canvas 画布里。本课把画布彻底讲清楚。

◆创建 Canvas

UI 的“画板”。

1. 【创建】Hierarchy 右键 → UI → Canvas（或创建任意 UI 元素会自动生成 Canvas + EventSystem）。
2. 【结构】Canvas 下会有子物体（如 Button 的子物体 Text）；EventSystem 自动创建。
3. 【Canvas 组件】核心组件：Render Mode（渲染模式）。
4. 【Screen Space - Overlay（默认）】：UI 永远显示在最上层，不参与 3D 遮挡，最简单常用。
5. 【Screen Space - Camera】：UI 放在指定相机的渲染上，可做“随场景缩放的 3D 效果 UI”。
6. 【World Space】：UI 变成世界中的 3D 物体（血条悬在头顶、VR 界面）。
7. 【Canvas Scaler】组件控制 UI 随屏幕缩放（下一步）。
8. 【注意】UI 元素必须挂在 Canvas（或其子对象）下才能显示。

◆Canvas Scaler 缩放模式

不同屏幕大小 UI 不乱。

1. Canvas 默认带【Canvas Scaler】组件，控制 UI 缩放。
2. 【UI Scale Mode】三种：
3. ① Constant Pixel Size：固定像素大小，UI 在不同分辨率下像素不变（小屏可能被裁）。
4. ② Scale With Screen Size：按参考分辨率缩放，UI 自适应（推荐，主流）。
5. 【参考分辨率】设 Reference Resolution，如 1920x1080。
6. 【匹配 Match】0=按宽缩放、1=按高缩放、0.5=取平均。手游竖屏常用 0.5。
7. ③ Constant Physical Size：按物理尺寸，多用于印刷/特殊设备。
8. 【安全区 Safe Area】全面屏手机避开刘海（进阶，可用 Safe Area 组件）。
9. 【实战】设 Scale With Screen Size + 1920x1080 + Match 0.5，改 Game 视图分辨率测试 UI 不散。
10. 【参考】UI 设计稿一般按 1920x1080 做。

⚠常见错误与排查

★动手练习

✓本节小结

Canvas 已掌握。下一课学事件系统。