HTML5：用LayaAir引擎设置遮罩效果（JS）
LayaAir的遮罩，可以设置一个对象(支持位图和矢量图)，然后根据对象形状进行遮罩显示。
一、遮罩API介绍
遮罩属性位于laya.display.Sprite API内，该属性的说明如图1所示：
（图1）
二、简单的遮罩示例
2.1 我们先用LayaAir引擎显示一张位图，代码如下：
(function(){var Sprite = Laya.Sprite;var Texture = Laya.Texture;var Handler = Laya.Handler;var Res;var img;(function(){Laya.init(1136,640);//设置舞台背景色Laya.stage.bgColor = "#ffffff"//资源路径Res = "./res/img/monkey1.png";//先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台Laya.loader.load(Res,Handler.create(this,graphicsImg));})();function graphicsImg(){img = new Sprite();//获取图片资源，绘制到画布img.graphics.drawTexture(Laya.loader.getRes(Res),150,50);//添加到舞台Laya.stage.addChild(img);}})();
运行效果如图2所示：
（图2）
2.2 创建一个圆形的遮罩区域，通过mask属性，即可实现遮罩效果。继续看代码和注释，我们将2.1示例代码修改为如下代码：
(function(){var Sprite = Laya.Sprite;var Texture = Laya.Texture;var Handler = Laya.Handler;var Res;var img;(function(){Laya.init(1136,640);//设置舞台背景色Laya.stage.bgColor = "#ffffff"//资源路径Res = "./res/img/monkey1.png";//先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台Laya.loader.load(Res,Handler.create(this,graphicsImg));})();function graphicsImg(){img = new Sprite();//获取图片资源，绘制到画布img.graphics.drawTexture(Laya.loader.getRes(Res),150,50);//添加到舞台Laya.stage.addChild(img);//创建遮罩对象var cMask = new Sprite();//画一个圆形的遮罩区域cMask.graphics.drawCircle(80,80,50,"#ff0000");//圆形所在的位置坐标cMask.pos(120,50);//实现img显示对象的遮罩效果img.mask = cMask;}})();
运行效果如图3所示：
（图3）
通过对比代码我们发现，实现遮罩很简单，把创建的显示对象cMask作为遮罩对象赋值给img对象的mask属性，即实现了img显示对象的遮罩效果。
三、在LayaAirIDE中设置遮罩
除了直接在代码中设置遮罩，也可以通过LayaAirIDE方便的给对象设置遮罩。下面我们跟着引导按步骤操作。
步骤一：创建一个UI页面maskDemo.ui，导入资源。(本步骤不了解的请去IDE章节查看UI创建及资源导入相关文档)
步骤二：在资源面板拖入一个Image组件到场景编辑区，如图4所示
（图4）
步骤三：双击进入Image组件内部，然后再到组件面板拖入一个Sprite组件，如图5所示。
（图5）
步骤四：选中Sprite组件，在右侧属性面板中，将公用属性renderType设置为mask，如图6所示。
（图6）
步骤五：双击进入Sprite组件内部，然后再到组件面板拖入一个Graphics圆形组件，调整好位置和大小。层级关系如图7所示。
（图7）
步骤六：连续双击编辑区的空白区域退出Image组件内部，即可看到遮罩的效果，如图8所示。
(图8)
四、在项目中应用LayaAirIDE设置的遮罩
4.1 发布UI
在IDE界面按F12发布制作遮罩效果的UI页面，会在src/ui目录下生成UI类，以及bin/h5/res/atlas目录下的图集文件，如图9所示。
（图9）
4.2 使用IDE生成的类与图集，实现遮罩效果
创建一个入口类MaskDemo.js，编码如下：
(function(){var Loader = Laya.Loader;var Handler = Laya.Handler;(function(){//初始化舞台Laya.init(1136,640);//设置舞台背景色Laya.stage.bgColor = "#ffffff"//加载图集资源，加载成功后添加到舞台Laya.loader.load([{url:"./res/atlas/ui.json",type:Loader.ATLAS}],Handler.create(this,onLoaded));}})();function onLoaded(){var cMask = new maskDemoUI();Laya.stage.addChild(cMask);}}})();
运行效果如图10所示，我们很快捷的实现了遮罩的效果。
(图10)