Maison > Article > interface Web > 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
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, 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;
Si不能使用一个遮罩对象来遮罩另一个遮罩对象。
显示对象作为遮罩,无需像矩形遮罩那样重复赋值
mask
,但是mask
rrreee
rect
change, rect
doit être réaffecté à shp.mask
. 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 : Comme 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. 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!