Apakah kegunaan topeng html5?

Fungsi topeng HTML5 adalah untuk menentukan kawasan yang boleh dilihat objek paparan Semua objek paparan mempunyai fungsi topeng segi empat tepat bermaksud bahawa kawasan yang boleh dilihat objek paparan adalah kawasan paparan persegi bukannya kawasan paparan yang tidak teratur; paparan Object masking bermaksud kawasan yang boleh dilihat objek paparan ditentukan oleh objek paparan lain, yang boleh mencapai masking yang tidak teratur.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi HTML5, komputer DELL G3

Apakah kegunaan html5 topeng?

Enjin Permainan HTML5 - Topeng - Topeng Segi Empat - Dua Kedua-duanya paparan & paparan topeng objek - hanya objek bertopeng dipaparkan, dan objek bertopeng adalah serupa dengan memotong

Topeng

Fungsi topeng adalah untuk menentukan kawasan yang boleh dilihat objek paparan, semua objek paparan Semua mempunyai fungsi penyamaran.

Topeng segi empat tepat

Topeng segi empat tepat, iaitu, kawasan yang boleh dilihat objek yang dipaparkan ialah kawasan paparan segi empat sama dan bukannya kawasan paparan yang tidak teratur. Penggunaan

ialah: tetapkan objek segi empat tepat kepada atribut mask objek paparan.

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

Jika rect berubah, rect perlu ditugaskan semula kepada shp.mask.

Dalam contoh di bawah, dua Shape objek dilukis, menggunakan topeng segi empat tepat untuk satu Shape dan satu lagi Shape sebagai rujukan. Kodnya adalah seperti berikut:

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

Sekarang tambah topeng pada shp Kod khusus adalah seperti berikut:

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

Seperti yang anda lihat, selepas menambah topeng pada. imej segi empat sama merah, hanya ( 20,20,30,50) bahagian ini. Bulatan hijau tanpa topeng masih terpapar sepenuhnya.

Topeng objek paparan

Topeng objek paparan, iaitu, kawasan yang boleh dilihat objek paparan ditentukan oleh objek paparan lain, yang boleh mencapai penutupan yang tidak teratur.

penggunaan ialah: Tetapkan atribut mask objek paparan bertopeng kepada objek topeng:

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

Kawasan paparan objek paparan bertopeng digunakan sebagai topeng Dalam keseluruhan kawasan legap objek paparan. Contohnya, kod berikut mencipta tika Shape yang mengandungi segi empat sama merah 100 x 100 piksel dan tika Sprite yang mengandungi bulatan biru dengan jejari 25 piksel, yang ditetapkan kepada topeng segi empat sama. Kawasan paparan segi empat sama ialah bahagian yang diliputi oleh kawasan legap bulat.

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

Objek paparan yang digunakan sebagai topeng boleh dianimasikan dan diubah saiz secara dinamik. Objek paparan topeng tidak semestinya perlu ditambah ke senarai paparan. Walau bagaimanapun, jika anda mahu objek topeng berskala apabila Peringkat itu diskalakan, atau jika anda mahu menyokong interaksi pengguna dengan objek topeng (seperti mengubah saiz), anda mesti menambah objek topeng pada senarai paparan.

Topeng boleh dialih keluar dengan menetapkan atribut mask kepada null:

mySprite.mask = null;

Anda tidak boleh menggunakan satu objek topeng untuk menutup objek topeng lain.

memaparkan objek sebagai topeng Tidak perlu menetapkan berulang kali mask seperti topeng segi empat tepat, tetapi mask mestilah elemen dalam senarai paparan.

Pembelajaran yang disyorkan: "Tutorial video HTML5"

Atas ialah kandungan terperinci Apakah kegunaan topeng html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!