A quoi sert le masque html5 ?

La fonction du masque HTML5 est de spécifier la zone visible d'un objet d'affichage. Tous les objets d'affichage ont la fonction de masque ; le masque rectangulaire signifie que la zone visible de l'objet d'affichage est une zone d'affichage carrée plutôt qu'une zone d'affichage. zone d'affichage irrégulière ; le masque de l'objet d'affichage est La zone visible d'un objet d'affichage est déterminée par un autre objet d'affichage, permettant un masquage irrégulier.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur DELL G3

html5 A quoi sert le masque ?

Moteur de jeu HTML5 - masque - masque rectangulaire - afficher les deux et afficher le masque d'objet - afficher uniquement l'objet masque, l'objet masqué est similaire à couper

masque

La fonction de le masquage consiste à spécifier la zone visible d'un objet d'affichage. Tous les objets d'affichage ont la fonction de masquage.

Masque rectangulaire

Masque rectangulaire, c'est-à-dire que la zone visible de l'objet affiché est une zone d'affichage carrée plutôt qu'une zone d'affichage irrégulière.

L'utilisation est la suivante : attribuer un objet rectangulaire à l'attribut mask de l'objet d'affichage. 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，但是 maskrrreee

Si rect change, rect doit être réaffecté à shp.mask.

Dans l'exemple suivant, deux objets Shape sont dessinés, en utilisant un masque rectangulaire pour l'un des Shape et l'autre Shape comme une référence. Le code est le suivant : shp. Le code spécifique est le suivant : rrreeeComme vous pouvez le voir, après avoir ajouté le masque au carré rouge, seulement (20). ,20,30,50 s'affiche) image de cette pièce. Le cercle vert sans masque est toujours affiché complètement.

Masque d'objet d'affichageMasque d'objet d'affichage, c'est-à-dire que la zone visible de l'objet d'affichage est déterminée par un autre objet d'affichage, ce qui peut réaliser un masquage irrégulier.

🎜L'utilisation est la suivante : définissez l'attribut mask de l'objet d'affichage masqué sur l'objet masque : 🎜rrreee🎜La zone d'affichage de l'objet d'affichage masqué, dans l'ensemble de l'objet d'affichage utilisé comme masque à l'intérieur la zone opaque. Par exemple, le code suivant crée une instance Shape contenant un carré rouge de 100 x 100 pixels et une instance Sprite contenant un cercle bleu d'un rayon de 25 pixels, ce qui est Réglez le masque sur un carré. La zone d'affichage carrée est la partie couverte par la zone opaque circulaire. 🎜rrreee🎜L'objet d'affichage utilisé comme masque peut être animé et redimensionné dynamiquement. Les objets d'affichage de masque ne doivent pas nécessairement être ajoutés à la liste d'affichage. Toutefois, si vous souhaitez que l'objet masque soit mis à l'échelle lorsque la scène est mise à l'échelle, ou si vous souhaitez prendre en charge l'interaction de l'utilisateur avec l'objet masque (comme le redimensionnement), vous devez ajouter l'objet masque à la liste d'affichage. 🎜🎜Un masque peut être supprimé en définissant l'attribut mask sur null : 🎜rrreee🎜🎜Vous ne pouvez pas utiliser un objet masque pour masquer un autre objet masque. 🎜🎜Affichez l'objet sous forme de masque. Il n'est pas nécessaire d'attribuer à plusieurs reprises un mask comme un masque rectangulaire, mais mask doit être un élément dans la liste d'affichage. 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜Apprentissage recommandé : "🎜Tutoriel vidéo HTML5🎜"🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!