HTML5 Canvas Play Mengubah Efek Efek Peta Progresif Gelombang Hyun yang keren (Demo Afiliasi)

Artikel ini memperkenalkan efek kanvas HTML5 untuk memainkan jadwal gelombang besar yang mempesona, sebagai berikut:

Seperti yang ditunjukkan pada gambar di atas, artikel ini adalah untuk mencapai efek di atas.

Karena AlloyTouch baru -baru ini menulis efek pemuatan yang keren dan keren. Jadi peta kemajuan gelombang besar yang disukai.

Pertama -tama, kita harus mengemas komponen kemajuan gambar gelombang besar. Prinsip dasarnya adalah menggunakan kanvas untuk menggambar diagram vektor dan bahan gambar untuk mensintesis efek khusus gelombang.

Metode QuadratCurveto () digunakan untuk menambahkan titik ke jalur saat ini dengan menggunakan titik kontrol yang ditentukan dari kurva Bessel kedua.

Sintaks Javascript:

 context.quadraticCurveto (CPX, CPY, X, Y);

X Koordinat titik kontrol Bessel CPX

Titik Kontrol Bessel CPy Koordinat Y

X berkoordinasi pada titik akhir x

Y tudung di akhir titik y

menyukai:

 ctx.moveto (20,20);

Melalui kode di atas, Anda dapat menggambar kurva Bessel kedua.

 Var wavewidth = 300, offset = 0, waveheight = 8, wavecount = 5, startx = -100, starty = 208, progress = 0, progressTep = 1, d2 = wavewidth / wavecount, = d2 / 2, hd = d / 2 , C = Document.GetElementById (MyCanvas), CTX = C.GetContext (2D); === D2) Offset = 0; untuk (var i = 0; i <wavecount; i ++) {var dx = i * d2; Offsetx + HD + D, Offset -Waveheight, Offsetx + D2, Offsety);

Anda dapat melihat gelombang latihan tak terbatas:

Kebutuhan utama di sini.

Jika Anda mendapatkan klon kode, Anda dapat mencoba menggambarnya ke kanvas besar.

Di sini, jika (-1 offset === D2) Offset = 0;

D2 adalah panjang Peak+Valley. Setelah puncak+lembah, siklus hidup yang sama mulai dimulai dengan siklus hidup yang sama dengan 0, sehingga dapat diatur ulang ke 0.

Properti GlobalCompositeoperation menggambarkan bagaimana warna yang ditarik pada kanvas dikombinasikan dengan warna yang ada di kanvas.

Gambar diagram kemajuan gelombang besar untuk digunakan:

 ctx.globalCompositeOperation = tujuan -top;

Signifikansi Destination-Atop: Konten yang ada di kanvas hanya akan dipertahankan di tempat yang tumpang tindih dengan grafik baru. Angka baru ditarik setelah konten.

Tentu saja, ada banyak opsi untuk GlobalCompositepration.

 var img = function tick () {... ctx.fill (); img.onload = function () {tick ();};

Agar menjadi sederhana dan langsung, berikut adalah kode yang merangkum loader, dan SRC diatur langsung melalui gambar baru untuk memuat gambar.

Setelah menggambar diagram vektor, atur globalCompositeprty, dan kemudian menggambar gambar penguin.

akhirnya

Contoh Unduh: Demo

Di atas adalah semua isi artikel ini.