CanvasLayer

EVOCOSMOS2026/4/14大约 3 分钟

最后同步日期：2026-04-15 | Godot 官方原文 — CanvasLayer

CanvasLayer

节点继承关系

继承链：Node -> CanvasLayer

继承自 Node

类型	名称	说明
属性	`Name`	节点名称
属性	`ProcessMode`	处理模式（始终 / 暂停时 / 仅编辑器）
属性	`ProcessPriority`	处理优先级，数字越小越先执行
信号	`ready`	节点进入场景树并准备就绪
信号	`tree_entered`	节点进入场景树
信号	`tree_exited`	节点完全离开场景树
方法	`GetNode<T>()`	按路径获取子节点
方法	`AddChild()`	添加子节点
方法	`RemoveChild()`	移除子节点
方法	`QueueFree()`	帧结束后释放节点
方法	`GetParent()`	获取父节点

定义

CanvasLayer 创建一个独立的"画布层"。在2D游戏中，所有节点默认画在同一层上，后面的物体会遮住前面的。CanvasLayer 可以让你创建一个新层，这个层的内容永远显示在所有其他内容之上（或之下）。

打个比方：想象你有一个透明玻璃桌（默认层），上面放了很多东西。CanvasLayer 就像是你在桌子上方架了一块新的透明玻璃板，放在新板子上的东西会盖住下面桌上的所有东西。常用来放 UI（血条、按钮等），让它们永远显示在最前面。

简单说：它创建一个独立的图层，常用来放永远显示在最前面的UI元素。

使用频率：★★★★★ 通用高频

节点用途

UI层：血条、分数、按钮等永远显示在最前面
HUD：小地图、任务提示、技能图标
全屏特效：全屏闪白、全屏闪黑等特效
弹出对话框：对话、提示信息等
视差背景：配合 ParallaxBackground 使用

使用场景

场景	说明
游戏UI	血条、分数、技能图标放在 CanvasLayer 上，不会被场景物体遮挡
对话框	角色对话时弹出的对话框永远在最前面
全屏特效	受伤时全屏闪红、死亡时全屏变暗
多层UI	不同 CanvasLayer 的 layer 值不同，实现UI层级管理

常用节点搭配

搭配节点	搭配方式
Control (Button, Label 等)	作为 CanvasLayer 的子节点，显示在UI层
CanvasModulate	放在 CanvasLayer 中，给特定层染色
ParallaxBackground	ParallaxBackground 继承自 CanvasLayer

属性	类型	默认值	继承自	说明
layer	int	1	CanvasLayer	画布层级。数字越大越在前面。默认层=1，UI层一般用更高的值
offset	Vector2	(0, 0)	CanvasLayer	整层的偏移量
rotation	float	0.0	CanvasLayer	整层的旋转角度
scale	Vector2	(1, 1)	CanvasLayer	整层的缩放
transform	Transform2D	—	CanvasLayer	整层的变换矩阵
follow_viewport_enabled	bool	false	CanvasLayer	是否跟随视口
follow_viewport_scale	float	1.0	CanvasLayer	跟随视口时的缩放比例

// C# - 全屏受伤闪红效果
using Godot;

public partial class DamageFlash : CanvasLayer
{
    private ColorRect _flashRect;
    private Timer _fadeTimer;
    private Color _flashColor = new Color(1, 0, 0, 0.5f); // 半透明红色

    public override void _Ready()
    {
        // 创建一个覆盖全屏的半透明矩形
        _flashRect = new ColorRect();
        _flashRect.Color = new Color(0, 0, 0, 0); // 初始透明
        _flashRect.SetAnchorsAndOffsetsPreset(Control.LayoutPreset.FullRect);
        AddChild(_flashRect);

        // 设置CanvasLayer在最上层
        Layer = 100;
    }

    public void FlashDamage()
    {
        _flashRect.Color = _flashColor;
        // 使用 Tween 实现淡出效果
        var tween = CreateTween();
        tween.TweenProperty(_flashRect, "color", new Color(0, 0, 0, 0), 0.3f);
    }
}

GDScript

# GDScript - 全屏受伤闪红效果
extends CanvasLayer

var flash_rect: ColorRect
var flash_color: Color = Color(1, 0, 0, 0.5)  # 半透明红色

func _ready():
    # 创建一个覆盖全屏的半透明矩形
    flash_rect = ColorRect.new()
    flash_rect.color = Color(0, 0, 0, 0)  # 初始透明
    flash_rect.set_anchors_and_offsets_preset(Control.LAYOUT_PRESET_FULL_RECT)
    add_child(flash_rect)

    # 设置CanvasLayer在最上层
    layer = 100

func flash_damage():
    flash_rect.color = flash_color
    # 使用 Tween 实现淡出效果
    var tween = create_tween()
    tween.tween_property(flash_rect, "color", Color(0, 0, 0, 0), 0.3)

CanvasLayer

CanvasLayer

节点继承关系

继承自 Node

定义

节点用途

使用场景

常用节点搭配

生效必备素材/资源

节点属性与信号

属性

信号

常用方法

代码示例