Contoh kode untuk mengimplementasikan animasi normal dan animasi partikel di kanvas

Kanvas digunakan untuk menggambar gambar dan animasi pada halaman web. Ini dapat dipahami sebagai kanvas, dan efek yang diinginkan dibangun di atas kanvas ini.

Kanvas dapat menggambar efek dinamis. Selain animasi biasa yang umum digunakan, konsep partikel juga dapat digunakan untuk mencapai efek dinamis yang lebih kompleks. Artikel ini menggunakan efek dinamis biasa dan efek khusus partikel untuk mengimplementasikan jam sederhana.

Animasi biasa menggunakan API kanvas untuk mencapai pola dan animasi reguler.

Memengaruhi

Efeknya relatif sederhana untuk dicapai. Kami terutama menganalisis penerapan offset sudut antara skala dan penunjuk.

Contoh ini adalah gambar skala jam: ada 12 jam pada dial, Math.PI adalah 180°, dan setiap jam menempati 30°.

.save() berarti menyimpan keadaan lingkungan kanvas saat ini dan menggambar berdasarkan ini. Setelah gambar selesai, status dan atribut jalur yang disimpan sebelumnya dikembalikan.

Hal yang sama berlaku untuk skala menit, cukup ubah sudut dan gayanya.

 // Skala waktu per jam offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // Skala warna offscreenCanvasCtx.strokeStyle = '#fff'; // Skala lebar offscreenCanvasCtx. lineWidth = 3; // Menempati 30° setiap jam offscreenCanvasCtx.rotate(Math.PI / 6); // Posisi awal gambar offscreenCanvasCtx.lineTo(140, 0) // Posisi akhir gambar; offscreenCanvasCtx.lineTo(120, 0); memulihkan() ;

Ambil jarum detik sebagai contoh: dapatkan detik dari waktu saat ini dan hitung sudut offset yang sesuai

 var sekarang = Tanggal baru(), detik = sekarang.getSeconds(), min = sekarang.getMinutes(), jam = sekarang.getHours(); jam = jam > 12 ? simpan(); di luar layarCanvasCtx.rotate(dtk * (Matematika.PI / 30) ...... di luar layarCanvasCtx.stroke();

Kanvas dapat digunakan untuk menggambar animasi yang rumit dan tidak beraturan. Efek partikel dapat digunakan untuk mencapai efek dinamis acak yang kompleks.

Partikel mengacu pada setiap piksel dalam data gambar imageData . Setelah mendapatkan setiap piksel, tambahkan atribut atau peristiwa untuk berinteraksi dengan partikel di area tersebut untuk mencapai efek dinamis.

Memengaruhi

Ambil contoh konversi gambar pada gambar di bawah ini. Efeknya adalah merender gambar terlebih dahulu di kanvas, lalu mendapatkan setiap piksel di area tempat teks berada.

 biarkan gambar = Gambar baru(); gambar.src='../image/logo.png'; biarkan piksel=[]; //Penyimpanan data piksel biarkan gambar.lebar = 300; Render gambar dan dapatkan informasi piksel di area image.onload=function(){ ctx.drawImage(gambar,(kanvas.lebar-gambar.lebar)/2,(kanvas.tinggi-gambar.tinggi)/2,gambar.lebar,gambar.tinggi); imageData=ctx.getImageData((kanvas.lebar- gambar.lebar)/2,(kanvas.tinggi-gambar.tinggi)/2,gambar.lebar,gambar.tinggi); //Mendapatkan informasi piksel bagan //Menggambar gambar};

Ukuran gambarnya 300*300, dengan total 90.000 piksel. Setiap piksel menempati 4 bit dan menyimpan data RGBA.

 function getPixels(){ var pos=0; var data=imageData.data; //Data array satu dimensi RGBA //Tinggi dan lebar gambar sumber adalah 300px for(var i=1;i<=image.width ;i++ ){ for(var j=1;j<=gambar.tinggi;j++){ pos=[(i-1)*gambar.lebar+(j-1)]*4; //Dapatkan posisi piksel if(data[pos]>=0){ var pixel={ x:(canvas.width-image.width)/2+j+Math.random()*20, //Reset setiap Piksel informasi posisi y: (canvas.height-image.height)/2+i+Math.random()*20, //Reset informasi posisi tiap piksel fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' } piksel.push(piksel); kanvas.getContext(2d); ctx.clearRect(0,0,kanvas.lebar,kanvas.tinggi); var len = piksel.panjang, curr_pixel = null; untuk (var i = 0; i < len; i++) { curr_pixel = piksel[i]; ctx.fillStyle = curr_pixel.fillStyle; saat ini_piksel.y, 1, 1);

Render jam teks

 fungsi waktu() { ctx.clearRect(0,0,canvas.width,canvas.height) ctx.font = 150px tebal; ctx.textBaseline='top'; ctx.fillStyle = rgba(245,245,245,0.2); (baru Tanggal().format('hh:mm:ss'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight }

Memengaruhi

Konsep partikel konversi teks sama seperti di atas. Piksel di area yang dipilih diperoleh, dipilih sesuai dengan kondisi filter dan disimpan dalam array. Gambar ulang setelah traversal.

 fungsi getPixels(){ biarkan imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight); i=1;i<=textHeight;i++){ untuk(biarkan j=1;j<=textWidth;j++){ pos=[(i-1)*textWidth+(j-1)]*4; //Dapatkan posisi piksel if(data[pos]>=0){ var pixel={ x:j+Math.random()* 20 , //Reset informasi posisi setiap piksel y:i+Math.random()*20, //Reset informasi posisi tiap piksel fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' }; pikselArr.push(piksel);

imgData menyimpan informasi piksel di area yang dipilih, setiap piksel menempati 4 bit, dan menyimpan informasi empat bit RGBA. Memfilter bit keempat dari setiap piksel, kode ini menyimpan semua piksel dengan transparansi bukan 0 ke array pixelsArr .

x dan y mencatat informasi posisi partikel. Untuk menghasilkan efek gerakan dalam rendering, posisi offset 0-20 piksel ditambahkan ke setiap partikel. Setiap kali digambar ulang, posisi offset dihasilkan secara acak gerakan.

Setelah mendapatkan partikel, Anda perlu menghapus teks asli di kanvas dan menggambar ulang partikel yang diperoleh ke kanvas.

 function drawPixels() { // Hapus konten kanvas dan gambar ulang ctx.clearRect(0,0,canvas.width,canvas.height); for (biarkan i di pixelArr) { ctx.fillStyle = pixelArr[i].fillStyle; r = Matematika.acak()*4 ctx.fillRect(pikselArr[i].x, pikselArr[i].y, r, R); } }

Gaya menggambar ulang partikel adalah warna asli dan transparansi saat memfilter piksel, dan ketika setiap partikel digambar di kanvas, parameter ukuran r ditentukan, dan nilai r adalah angka acak dari 0 hingga 4. Partikel yang dihasilkan berukuran acak.

Setelah berhasil mendapatkan partikel dan menggambar ulang, halaman perlu disegarkan secara real time. Metode window.requestAnimationFrame(callback) digunakan di sini.

 function time() { ...... getpixels(); //Dapatkan partikel drawPixels(); // Gambar ulang partikel requestAnimationFrame(time }

Metode window.requestAnimationFrame(callback) memberi tahu browser bahwa Anda ingin melakukan animasi dan meminta browser memanggil fungsi yang ditentukan untuk memperbarui animasi sebelum gambar ulang berikutnya. Metode ini menggunakan fungsi panggilan balik sebagai parameter, yang akan dipanggil sebelum browser menggambar ulang.

Metode ini tidak memerlukan pengaturan interval waktu, dan frekuensi panggilan mengadopsi interval waktu sistem (1 detik).

Penjelasan dokumen klik di sini

Memengaruhi

Artikel ini terutama mencapai efek dinamis jam dalam dua cara berbeda, di antaranya jam partikel memiliki pengoperasian yang lebih baik. Pada seri kanvas mendatang, efek yang lebih dinamis akan diterapkan untuk sistem partikel.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.