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遮罩的作用是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。