html5 遮罩 有什麼用

html5遮罩的作用是指定一個顯示物件的可見區域，所有顯示物件都具備遮罩功能；矩形遮罩即顯示物件的可見區域是方形顯示區域而非不規則顯示區域；顯示物件遮罩即顯示物件的可見區域由另一個顯示物件決定，可實現不規則遮罩。

本教學操作環境：Windows10系統、HTML5版、DELL G3電腦

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 遮罩 有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！