【CocosCreator入门】CocosCreator组件 | Mask（遮罩）组件

遮罩组件（Mask）用于创建一个遮罩区域，该区域限制所包含节点的子节点在其范围内显示。在Cocos Creator中，通过遮罩组件可以实现图像的圆角效果、圆形或者任意形状的遮罩等。

在Cocos Creator中使用遮罩组件的步骤如下：

1. 选择需要应用遮罩的节点，在其组件菜单中添加“Mask”组件。
2. 在“Mask”组件的属性中，可以设置“Type”来选择遮罩的形状，如圆形、圆角矩形、不规则多边形等。
3. 如果选择“Graphics”类型，则需要从下面的选项中选择一个绘图组件，并且该组件的形状将决定遮罩的形状。

以下是一个简单的例子，展示如何在Cocos Creator中使用遮罩组件来制作一个圆角矩形遮罩：

1. 创建一个新的节点，例如命名为“MaskNode”。
2. 在“MaskNode”上添加“Mask”组件。
3. 在“Mask”组件的“Type”中选择“Graphics”。
4. 在“Graphics”中选择一个绘图组件，如果没有则创建一个新的绘图组件。
5. 在绘图组件中绘制一个圆角矩形。

以下是使用代码来实现上述步骤的示例：

// 假设已经有一个名为“maskNode”的节点，并且该节件已经添加了Mask组件
var maskNode = cc.find("maskNode");
 
// 创建一个Graphics组件
var graphics = maskNode.addComponent(cc.Graphics);
 
// 绘制一个圆角矩形
graphics.rect(0, 0, 100, 100); // 设置矩形的位置和大小
graphics.fillColor = cc.Color.GREEN; // 设置填充颜色
graphics.cornerRadius = 10; // 设置圆角的半径
 
// 此时遮罩已经设置好，子节点会根据遮罩区域来显示

在实际使用时，你可以通过代码动态地修改遮罩区域，实现动态的遮罩效果。