html5 마스크의 용도는 무엇입니까?

HTML5 마스크의 기능은 표시 개체의 표시 영역을 지정하는 것입니다. 모든 표시 개체에는 마스크 기능이 있습니다. 직사각형 마스크는 표시 개체의 표시 영역이 사각형 표시 영역임을 의미합니다. 불규칙한 표시 영역 표시 객체 마스크는 표시 객체의 가시 영역이 다른 표시 객체에 의해 결정되어 불규칙한 마스킹이 가능합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, HTML5 버전, DELL G3 컴퓨터

html5 마스크의 용도는 무엇입니까?

HTML5 게임 엔진 - 마스크 - 직사각형 마스크 - 둘 다 표시 및 객체 표시 마스크 - 마스크 객체만 표시하며, 마스크가 적용된 객체는

마스크를 잘라내는 것과 유사합니다. 마스킹은 표시 객체의 가시 영역을 지정하는 것입니다. 모든 표시 객체에는 마스킹 기능이 있습니다.

사각형 마스크사각형 마스크, 즉 표시되는 객체의 가시 영역은 불규칙한 표시 영역이 아닌 정사각형 표시 영역입니다.

사용법: 직사각형 객체를 표시 객체의 mask 속성에 할당합니다.

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

mask 属性。

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

如果 rect 发生变化，需要重新将 rect 赋值给 shp.mask。

下面示例中绘制了两个 Shape 对象，对其中一个 Shape 使用矩形遮罩，另外一个 Shape 当做参考。代码如下：

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

现在对 shp 添加遮罩，具体代码如下：

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

可以看到，红色的正方形添加了遮罩后只显示了(20,20,30,50)这部分的图像。而未添加遮罩的绿色圆形依然显示完整。

显示对象遮罩

显示对象遮罩，即显示对象的可见区域由另一个显示对象确定，可实现不规则遮罩。

用法为：将被遮罩显示对象的 mask 属性设置为遮罩对象：

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

被遮罩的显示对象的显示区域，在用作遮罩的显示对象的全部不透明区域之内。例如，下面的代码创建一个包含 100 x 100 像素的红色正方形的 Shape 实例和一个包含半径为 25 个像素的蓝色圆的 Sprite 实例，它被设置为正方形的遮罩。正方形的显示区域，是由圆的不透明区域覆盖的那一部分。

mySprite.mask = null;

用作遮罩的显示对象可设置动画、动态调整大小。遮罩显示对象不一定需要添加到显示列表中。但是，如果希望在缩放舞台时也缩放遮罩对象，或者如果希望支持用户与遮罩对象的交互（如调整大小），则必须将遮罩对象添加到显示列表中。

通过将 mask 属性设置为 null 可以删除遮罩：

rrreee

不能使用一个遮罩对象来遮罩另一个遮罩对象。

显示对象作为遮罩，无需像矩形遮罩那样重复赋值 mask，但是 maskRect가 변경되면 Rect를 shp.mask에 다시 할당해야 합니다.

다음 예에서는 Shape 중 하나에 직사각형 마스크를 사용하고 다른 하나는 Shape로 두 개의 Shape 객체를 그립니다. 참조. 코드는 다음과 같습니다. rrreee이제 shp에 마스크를 추가합니다. 구체적인 코드는 다음과 같습니다.

표시 ​​객체 마스크표시 객체 마스크, 즉 표시 객체의 가시 영역은 다른 표시 객체에 의해 결정되므로 불규칙한 마스킹이 가능합니다. 사용법: 마스크된 표시 객체의 mask 속성을 ​​마스크 객체로 설정:

rrreee🎜전체 표시 객체에서 마스크된 표시 객체의 표시 영역은 내에서 마스크로 사용됩니다. 불투명한 영역. 예를 들어, 다음 코드는 100 x 100픽셀의 빨간색 정사각형을 포함하는 Shape 인스턴스와 반경 25픽셀의 파란색 원을 포함하는 Sprite 인스턴스를 생성합니다. 마스크를 정사각형으로 설정합니다. 정사각형 표시 영역은 원형의 불투명한 영역으로 덮힌 부분입니다. 🎜rrreee🎜마스크로 사용되는 표시 객체는 애니메이션화되고 동적으로 크기가 조정될 수 있습니다. 마스크 표시 객체를 반드시 표시 목록에 추가할 필요는 없습니다. 그러나 스테이지의 크기가 조절될 때 마스크 객체의 크기도 조절하려는 경우 또는 마스크 객체와의 사용자 상호 작용(예: 크기 조정)을 지원하려는 경우 마스크 객체를 표시 목록에 추가해야 합니다. 🎜🎜mask 속성을 ​​null로 설정하여 마스크를 제거할 수 있습니다. 🎜rrreee🎜🎜한 마스크 개체를 사용하여 다른 마스크 개체를 마스크할 수 없습니다. 🎜🎜객체를 마스크로 표시합니다. 직사각형 마스크처럼 마스크를 반복적으로 할당할 필요는 없지만, 마스크는 표시 목록의 요소여야 합니다. 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜추천 학습: "🎜HTML5 비디오 튜토리얼🎜"🎜

위 내용은 html5 마스크의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!