html5遮罩的作用是什么

今天小編給大家分享一下html5遮罩的作用是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

html5遮罩的作用是指定一個(gè)顯示對(duì)象的可見(jiàn)區(qū)域，所有顯示對(duì)象都具備遮罩功能；矩形遮罩即顯示對(duì)象的可見(jiàn)區(qū)域是方形顯示區(qū)域而非不規(guī)則顯示區(qū)域；顯示對(duì)象遮罩即顯示對(duì)象的可見(jiàn)區(qū)域由另一個(gè)顯示對(duì)象確定，可實(shí)現(xiàn)不規(guī)則遮罩。

HTML5游戲引擎-遮罩——矩形遮罩-兩個(gè)都顯示 & 顯示對(duì)象遮罩-只顯示遮罩物，被遮罩物類似切除

遮罩

遮罩的作用是指定一個(gè)顯示對(duì)象的可見(jiàn)區(qū)域，所有顯示對(duì)象都具備遮罩功能。

矩形遮罩

矩形遮罩，即顯示對(duì)象的可見(jiàn)區(qū)域是方形顯示區(qū)域而非不規(guī)則顯示區(qū)域。

用法為：將一個(gè)矩形對(duì)象賦值給顯示對(duì)象的 mask 屬性。

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

如果 rect 發(fā)生變化，需要重新將 rect 賦值給 shp.mask。

下面示例中繪制了兩個(gè) Shape 對(duì)象，對(duì)其中一個(gè) Shape 使用矩形遮罩，另外一個(gè) Shape 當(dāng)做參考。代碼如下：

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;
    }}

現(xiàn)在對(duì) shp 添加遮罩，具體代碼如下：

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

可以看到，紅色的正方形添加了遮罩后只顯示了(20,20,30,50)這部分的圖像。而未添加遮罩的綠色圓形依然顯示完整。

顯示對(duì)象遮罩

顯示對(duì)象遮罩，即顯示對(duì)象的可見(jiàn)區(qū)域由另一個(gè)顯示對(duì)象確定，可實(shí)現(xiàn)不規(guī)則遮罩。

用法為：將被遮罩顯示對(duì)象的 mask 屬性設(shè)置為遮罩對(duì)象：

//將maskSprite設(shè)置為mySprite的遮罩
mySprite.mask = maskSprite;

被遮罩的顯示對(duì)象的顯示區(qū)域，在用作遮罩的顯示對(duì)象的全部不透明區(qū)域之內(nèi)。例如，下面的代碼創(chuàng)建一個(gè)包含 100 x 100 像素的紅色正方形的 Shape 實(shí)例和一個(gè)包含半徑為 25 個(gè)像素的藍(lán)色圓的 Sprite 實(shí)例，它被設(shè)置為正方形的遮罩。正方形的顯示區(qū)域，是由圓的不透明區(qū)域覆蓋的那一部分。

//畫(huà)一個(gè)紅色的正方形
 var square:egret.Shape = new egret.Shape();
 square.graphics.beginFill(0xff0000);
 square.graphics.drawRect(0,0,100,100);
 square.graphics.endFill();
 this.addChild(square);//畫(huà)一個(gè)藍(lán)色的圓形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;

用作遮罩的顯示對(duì)象可設(shè)置動(dòng)畫(huà)、動(dòng)態(tài)調(diào)整大小。遮罩顯示對(duì)象不一定需要添加到顯示列表中。但是，如果希望在縮放舞臺(tái)時(shí)也縮放遮罩對(duì)象，或者如果希望支持用戶與遮罩對(duì)象的交互（如調(diào)整大?。?，則必須將遮罩對(duì)象添加到顯示列表中。

通過(guò)將 mask 屬性設(shè)置為 null 可以刪除遮罩：

mySprite.mask = null;

不能使用一個(gè)遮罩對(duì)象來(lái)遮罩另一個(gè)遮罩對(duì)象。

顯示對(duì)象作為遮罩，無(wú)需像矩形遮罩那樣重復(fù)賦值 mask，但是 mask 必須是顯示列表里的元素。

讀到這里，這篇“html5遮罩的作用是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

以上就是“html5遮罩的作用是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。