LayaAir学习之二：给显示对象设置遮罩----js方向

本文档通过官方技术文档介绍如何在LayaAir中为显示对象设置遮罩，提供了一个JS实现的示例。在遇到错误时，解决办法是进入设计模式，执行‘导出——清理并导出’，确保素材资源导入bin目录，然后重新调试。按照此步骤，成功实现了遮罩效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据官方技术文档写的一个设置遮罩demo。

创建空项目，并在bin目录下创建maskDemo.html，输入如下代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<title>www.layabox.com</title>
	<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'/>
	<meta name='apple-mobile-web-app-capable' content='yes' />
	<meta name='full-screen' content='true' />
	<meta name='screen-orientation' content='portrait' />
	<meta name='x5-fullscreen' content='true' />
	<meta name='360-fullscreen' content='true' />
	<meta http-equiv='expires' content='0' />
</head>
<body>
   
	<!--核心包，封装了显示对象渲染，事件，时间管理，时间轴动画，缓动，消息交互,socket，本地存储，鼠标触摸，声音，加载，颜色滤镜，位图字体等-->
	<script type="text/javascript" src="libs/laya.core.js"></script>
	<!--封装了webgl渲染管线，如果使用webgl渲染，可以在初始化时调用Laya.init(1000,800,laya.webgl.WebGL);-->
    <script type="text/javascript" src="libs/laya.webgl.js"></script>

	<script>
    var Sprite=Laya.Sprite;
    var Loader=Laya.Loader;
    function onLoaded(){
        //不带遮罩的显示对象
        var sprite0=new Sprite();
        sprite0.graphics.drawTexture(Loader.getRes("comp/image.png"));
        sprite0.pos(100, 100);
        Laya.stage.addChild(sprite0);
        //带遮罩的显示对象
        var sprite1=new Sprite();
        sprite1.graphics.drawTexture(Loader.getRes("comp/image.png"));
        sprite1.pos(300, 100);

        //创建遮罩对象
        var mask = new Sprite();
        //画一个圆形的遮罩区域
        mask.graphics.drawCircle(0,0,80,"#f00");
        mask.pos(80,80);
        sprite1.mask=mask;
        Laya.stage.addChild(sprite1);
    }
    function init(){
        //创建舞台，默认背景色是黑色的
        Laya.init(600, 400, Laya.WebGL);
        Laya.stage.bgColor="#ccc";
        Laya.loader.load(
            [{
                url: 'res/atlas/comp.json',
                type: Loader.ATLAS 
            }],
            Laya.Handler.create(this, onLoaded)
        );
    }
    init();
    
    </script>
</body>
</html>

一开始我以为json文件是随便给出的，我就在项目里头新建了个demo.json，然后将资源地址直接指向laya/assets/comp目录下的图片资源，然后直接点击调试。结果发现控制台直接报错，提示找不到文件，但是我直接复制又能打开。