What is the use of html5 mask?-Front-end Q&A-php.cn

What is the use of html5 mask?

藏色散人

Release： 2023-01-28 10:09:49

Original

2272 people have browsed it

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.

What is the use of html5 mask?

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

Copy after login

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

Copy after login

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;

Copy after login

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;

Copy after login

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;

Copy after login

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;

Copy after login

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!