What is the use of html5 mask?

html5 The function of the mask is to specify the visible area of ​​a display object. All display objects have the mask function; the rectangular mask means that the visible area of ​​the display object is a square display area rather than an irregular display area; display Object masking means that the visible area of ​​the display object is determined by another display object, which can achieve irregular masking.

The operating environment of this tutorial: Windows 10 system, HTML5 version, DELL G3 computer

html5 What is the use of masking?

##HTML5 Game Engine-Mask-Rectangular Mask-Two Both display & display object mask - only the masked object is displayed, and the masked object is similar to cutting off

Mask

The function of the mask is to specify the visible area of ​​a display object, all display objects All have masking functions.

Rectangular mask

Rectangular mask, that is, the visible area of ​​the displayed object is a square display area rather than an irregular display area.

Usage is: assign a rectangular object to the

mask property of the display object.

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

If

rect changes, rect needs to be reassigned to shp.mask.

In the following example, two

Shape objects are drawn. One Shape is used as a rectangular mask, and the other Shape is used as refer to. The code is as follows:

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

Now add a mask to

shp. The specific code is as follows:

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

As you can see, after adding the mask to the red square, only ( 20,20,30,50) image of this part. The green circle without a mask is still displayed completely.

Display object mask

Display object mask, that is, the visible area of ​​the display object is determined by another display object, which can achieve irregular masking.

Usage is: Set the

mask attribute of the masked display object to the mask object:

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

The display area of ​​the masked display object is used as The mask displays all opaque areas of the object. For example, the following code creates a

Shape instance containing a red square of 100 x 100 pixels and a Sprite instance containing a blue circle with a radius of 25 pixels, which is set to Square mask. The square display area is the part covered by the circular opaque area.

//画一个红色的正方形
 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;

The display object used as a mask can be animated and dynamically resized. Mask display objects do not necessarily need to be added to the display list. However, if you want the mask object to scale when the Stage is scaled, or if you want to support user interaction with the mask object (such as resizing), you must add the mask object to the display list.

A mask can be removed by setting the

mask property to null:

mySprite.mask = null;

You cannot use one mask object to mask another A mask object.

Display the object as a mask, there is no need to repeatedly assign

mask like a rectangular mask, but mask must be an element in the display list.

Recommended study: "HTML5 Video Tutorial"

The above is the detailed content of What is the use of html5 mask?. For more information, please follow other related articles on the PHP Chinese website!