组件
使用mask的地方只需要两个组件：自带的Node和渲染组件里的Mask
使用组件
首先要有一个使用mask组件的图层，设置好宽高。他下面有张图片。层级结构如图：
mask_exam的暂定为宽高都是300（没有宽高看不到效果），然后我们给他加一个mask组件（在渲染组件里，点击添加组件按钮就能找到了），mask_exam组件详情如图：
这样我们就会发现500x300的图片，300x300外的部分已经看不到了：
分类
mask分别有三种类型的遮罩，分别是RECT矩形、ELLIPSE圆形和IMAGE_STENCIL图片模板
RECT矩形
默认的类型，以上面的例子来说，就是300x300的矩形为边界，默认超出部分隐藏，如上图；
如果勾选上Inverted，则300x300外面的部分显示，里面的部分隐藏，如下图：
ELLIPSE圆形/多边形
和矩形大体相同，就是遮罩部分是圆，同样有反选Inverted的功能，效果和rect的相同
有一个他自己的功能挺有意思，就是Segements椭圆遮罩的曲线细分数，换句话说就是多边形，默认为64，最小为3，最大为10000，写几就是几边形，64就是圆了，目测64和10000无肉眼可见的差别。
组件详情如图：
下图分别是Segements为3和64的效果：
IMAGE_STENCIL自定义（图片模板）
和上面两个有同样的反选Inverted功能
接下来我们先往他的Sprite Frame里面拽过去一张图片（最好是旁边有透明区域的png图片，要不然看不到效果）
组件详情如图：
然后随便调一下上面的Alpha Threshold，让他不为0，就能看到效果了，如图（旁边的人就是拽进去当图片模板的11，放上用来对比的）：
我们会发现小人拽进去之后被压缩成了300x300的图片，且只有小人存在的位置，青蛙才会出现，调整Alpha Threshold，小人的显示有一些细微的差别，主要是边缘。
如果想让小人正常显示，有两个办法：
1、将mask组件所在的节点大小改成图片模板（小人）的大小
2、点击mask组件右下方的Resize to Target按钮，组件大小会自动变成图片模板的大小
js里改变mask大小
声明绑定之前的学习记录里都有，这里就不多做赘述了
如果声明绑定的是一个节点（node），就可以直接写，如下方代码就是改变他的宽度
this.mask_exam.width = "500";
如果声明绑定的不是节点类型，需要转换成节点再写：
this.mask_exam.node.width = "500";
转载---原文链接：https://blog.csdn.net/judykang123/article/details/108712372
