HTML5マスクって何に使うの？

html5 マスクの機能は、表示オブジェクトの可視領域を指定することです。すべての表示オブジェクトにはマスク機能があります。長方形マスクは、表示オブジェクトの可視領域が正方形であることを意味します不規則な表示領域ではなく、表示領域。表示オブジェクトのマスキングとは、表示オブジェクトの可視領域が、不規則なマスキングを実現できる別の表示オブジェクトによって決定されることを意味します。

このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、DELL G3 コンピューター

html5 の用途マスキング？

##HTML5 ゲーム エンジン - マスク - 長方形マスク - 2 表示オブジェクトと表示オブジェクトの両方マスク - マスクされたオブジェクトのみが表示され、マスクされたオブジェクトは切り取られるのと似ています。 Mask

マスクの機能は、表示オブジェクトの可視領域を指定することです。表示オブジェクトはすべてマスキング機能を持っています。

長方形マスク長方形マスク、つまり表示オブジェクトの可視領域は、不規則な表示領域ではなく正方形の表示領域です。

使用法: 長方形オブジェクトを表示オブジェクトの

mask

プロパティに割り当てます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">shp.mask = new egret.Rectangle(20,20,30,50);</pre><div class="contentsignin">ログイン後にコピー</div></div>

rect

が変更された場合は、rect を shp.mask に再割り当てする必要があります。

次の例では、2 つの

Shape

オブジェクトが描画されます。1 つの Shape は長方形のマスクとして使用され、もう 1 つの Shape は参照として使用されます。コードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;     }}</pre><div class="contentsignin">ログイン後にコピー</div></div> 次に、マスクを

shp

に追加します。具体的なコードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var rect:egret.Rectangle = new egret.Rectangle(20,20,30,50);  shp.mask = rect;</pre><div class="contentsignin">ログイン後にコピー</div></div> ご覧のとおり、マスクを

shp

に追加した後、赤い四角、この部分の ( 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 中国語 Web サイトの他の関連記事を参照してください。