html5遮罩的作用是什么

今天小编给大家分享一下html5遮罩的作用是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

html5遮罩的作用是指定一个显示对象的可见区域，所有显示对象都具备遮罩功能；矩形遮罩即显示对象的可见区域是方形显示区域而非不规则显示区域；显示对象遮罩即显示对象的可见区域由另一个显示对象确定，可实现不规则遮罩。

HTML5游戏引擎-遮罩——矩形遮罩-两个都显示 & 显示对象遮罩-只显示遮罩物，被遮罩物类似切除

遮罩

遮罩的作用是指定一个显示对象的可见区域，所有显示对象都具备遮罩功能。

矩形遮罩

矩形遮罩，即显示对象的可见区域是方形显示区域而非不规则显示区域。

用法为：将一个矩形对象赋值给显示对象的 mask 属性。

shp.mask = new egret.Rectangle(20,20,30,50);

如果 rect 发生变化，需要重新将 rect 赋值给 shp.mask。

下面示例中绘制了两个 Shape 对象，对其中一个 Shape 使用矩形遮罩，另外一个 Shape 当做参考。代码如下：

class Test extends egret.DisplayObjectContainer{
    public constructor()
    {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
    }
    private onAddToStage(event:egret.Event)
    {
        var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill( 0xff0000 );
        shp.graphics.drawRect( 0,0,100,100);
        shp.graphics.endFill();
        this.addChild( shp );
        var shp2:egret.Shape = new egret.Shape();
        shp2.graphics.beginFill( 0x00ff00 );
        shp2.graphics.drawCircle( 0,0, 20);
        shp2.graphics.endFill();
        this.addChild( shp2 );
        shp2.x = 20;
        shp2.y = 20;
    }}

现在对 shp 添加遮罩，具体代码如下：

var rect:egret.Rectangle = new egret.Rectangle(20,20,30,50);  shp.mask = rect;

可以看到，红色的正方形添加了遮罩后只显示了(20,20,30,50)这部分的图像。而未添加遮罩的绿色圆形依然显示完整。

显示对象遮罩

显示对象遮罩，即显示对象的可见区域由另一个显示对象确定，可实现不规则遮罩。

用法为：将被遮罩显示对象的 mask 属性设置为遮罩对象：

//将maskSprite设置为mySprite的遮罩
mySprite.mask = maskSprite;

被遮罩的显示对象的显示区域，在用作遮罩的显示对象的全部不透明区域之内。例如，下面的代码创建一个包含 100 x 100 像素的红色正方形的 Shape 实例和一个包含半径为 25 个像素的蓝色圆的 Sprite 实例，它被设置为正方形的遮罩。正方形的显示区域，是由圆的不透明区域覆盖的那一部分。

//画一个红色的正方形
 var square:egret.Shape = new egret.Shape();
 square.graphics.beginFill(0xff0000);
 square.graphics.drawRect(0,0,100,100);
 square.graphics.endFill();
 this.addChild(square);//画一个蓝色的圆形var circle:egret.Shape = new egret.Shape();circle.graphics.beginFill(0x0000ff);circle.graphics.drawCircle(25,25,25);circle.graphics.endFill();this.addChild(circle);square.mask = circle;

用作遮罩的显示对象可设置动画、动态调整大小。遮罩显示对象不一定需要添加到显示列表中。但是，如果希望在缩放舞台时也缩放遮罩对象，或者如果希望支持用户与遮罩对象的交互（如调整大小），则必须将遮罩对象添加到显示列表中。

通过将 mask 属性设置为 null 可以删除遮罩：

mySprite.mask = null;

不能使用一个遮罩对象来遮罩另一个遮罩对象。

显示对象作为遮罩，无需像矩形遮罩那样重复赋值 mask，但是 mask 必须是显示列表里的元素。

读到这里，这篇“html5遮罩的作用是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。

以上就是“html5遮罩的作用是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。