Saya ingin berbagi dengan Anda efek gambar di bawah ini yang baru-baru ini saya terapkan.
Jika kita ingin menggambar animasi kurva di bawah ini
Jika Anda menggambar garis pendek untuk menghubungkan setiap kali, gambar di bawah ini dibagi menjadi lima segmen.
Baca sepuluh paragraf lagi
Jika jumlah segmen yang terbagi cukup, menggambar satu segmen dalam satu waktu akan terlihat seperti lintasan melengkung.
kurva bezier kuadrat /** * Animasi kurva Bezier kuadrat* @param {Array<number>} memulai koordinat titik awal* @param {Array<number>} koordinat titik kelengkungan (yaitu, titik balik, bukan koordinat eksak, hanya perkiraan arah) * @param {Array<angka>} koordinat titik akhir * @param {angka} persen persentase gambar (0-100) */ function drawCurvePath(awal, titik, akhir, persen){ ctx.beginPath(); //Mulai menggambar garis ctx.moveTo(start[0], start[1]); //Pindahkan pena ke titik awal untuk (var t = 0; t <= persen / 100; t += 0.005 ) { //Dapatkan koordinat setiap titik waktu var x = quadraticBezier(start[0], point[0], end[0], t); quadraticBezier(mulai[1], titik[1], akhir[1], t); ctx.lineTo(x, y); //Gambarkan garis lurus dari titik waktu sebelumnya ke titik waktu sekarang} ctx.stroke( ); //Gelombang} /** * Persamaan kurva Bezier kuadrat* @param {Array<angka>} titik awal awal* @param {Array<angka>} titik akhir * @param {Array<angka>} titik akhir * @param {angka} kemajuan menggambar (0-1) */ function quadraticBezier(p0, p1, p2, t) { var k = 1 - t; kembalikan k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2 }Untuk konten kurva Bezier yang lebih detail, silakan merujuk ke blog ini
menjadi kode lengkap
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=edge> <title>Animasi kurva Bezier persegi</title> <style> body { background: #0f1632; 1px solid #ccc; } #img { display: none; =1500 tinggi =750></kanvas> <img id=img src=https://s3.imgsha.com/2019/04/22/light.png> <skrip> var ctx = document.getElementById('canvas').getContext('2d'); var img = document.getElementById('img'); var persen = 0; 300, 100], akhir: [100, 400], departemen: 'data 1', nilai: 4321 } fungsi init(){ persen = 0; //Reset proses setiap kali draw(); } function draw(){ ctx.clearRect(0, 0, 1500, 750); # ffffff'; //Setel gaya garis drawCurvePath(data.start, data.point, data.end, persen += 0.8; //Saat proses meningkat, ini mengontrol kecepatan animasi jika (persen <= 100) { //Lanjutkan pemanggilan jika gambar belum selesai. Jika gambar sudah selesai, progresnya akan direset requestAnimationFrame(draw); /... } function quadraticBezier( p0, p1, p2, t) { //... } </script></body></html>Animasinya keluar
Seperti disebutkan sebelumnya, parameter point dalam fungsi drawCurvePath(start, point, end, percent) bukanlah titik kelengkungan tertentu, melainkan arah umum.
Mari kita lihat situasi ketika point diubah menjadi [200,200]
Jika Anda ingin mendapatkan efek jatuh, Anda perlu menambahkan efek gradien pada garis dari tinggi ke rendah, dari jauh ke dekat.
/** * Membuat gradien linier* @param {Array<number>} titik awal awal* @param {Array<number>} titik kelengkungan* @param {Array<number>} titik akhir akhir* @param {number} gambar kemajuan ( 0-1) */fungsi createLinearGradient(mulai,akhir,mulaiWarna,akhirWarna){ var lineGradient = ctx.createLinearGradient(...mulai, ...akhir); lineGradient.addColorStop(0, startColor); // lineGradient.addColorStop(0.3, '#fff'); lineGradient.addColorStop(1, endColor); ctx.strokeStyle = '#ffffff'; ctx.strokeStyle = buatLinearGradient(data.mulai, data.akhir, 'rgba(255.255.255,.2)', '#fff' ); //...}Untuk detail tentang gradien kanvas, silakan merujuk ke MDN
Halo kepala Untuk menambahkan halo kepala, Anda perlu menggambar lingkaran dan mengatur gradien radial. Gunakan fungsi drawCurvePath untuk mendapatkan x, y dan mengatur ulang posisi lingkaran.
fungsi createHeadLight(x,y){ ctx.beginPath(); //Membuat gradien radial var radialGradient = ctx.createRadialGradient(x, y, 0, x, y, 20); 1)); radialGradient.addColorStop(.2, rgba(255,255,255,.8)); radialGradient.addColorStop(1, transparan); ctx.fillStyle = radialGradient; Matematika .PI, salah); ctx.fill();}//Fungsi drawCurvePath memerlukan beberapa penyesuaian fungsi drawCurvePath(awal, titik, akhir, persen){ //... ctx.stroke(); // Stroke createHeadLight(x,y) // Draw lingkaran seperti menggambar garis frekuensi} Untuk detail arc untuk menggambar lingkaran, silakan merujuk ke MDN
Menambahkan teks sangat mirip dengan menambahkan head halo. Keduanya menggunakan fungsi drawCurvePath untuk mendapatkan x, y dan mengatur ulang posisi blok teks.
/** * Buat teks* @param {String} data departemen* @param {Nomor} data* @param {Nomor} koordinat sumbu x* @param {Nomor} koordinat sumbu y*/fungsi drawText(departemen, nilai, x, y) { ctx.fillStyle = '#fff' ctx.font = 22px Microsoft Yahei; y + 20); //Untuk membuat teks di sudut kanan bawah lingkaran cahaya x, sumbu y perlu diimbangi dengan jarak tertentu var width = ctx.measureText(value).width; teks ctx.fillStyle = createLinearGradient([x + 30, 0], //Rentang rendering sumbu x gradien teks adalah [x+30,x+30+lebar teks], [x + 30 + lebar, 0], //Di sini y disetel ke 0 karena tidak ada API untuk mendapatkan tinggi teks. Penulisan 0 juga dapat diterima '#fffd00', '#ff6d00' ); 50 ); //Fungsi drawCurvePath memerlukan beberapa penyesuaian fungsi drawCurvePath(awal, titik, akhir, persen, departemen, nilai) { //... createHeadLight(x,y) drawText(departemen, nilai, x, y) } Tambahkan teks dan gambar di posisi akhir setelah animasi selesaiHarap diperhatikan bahwa saat menambahkan teks dan gambar setelah animasi selesai, Anda perlu membersihkan kanvas segera setelah animasi kurva selesai, lalu menambahkan teks dan gambar.
/** * Buat gambar* @param {Nomor} koordinat sumbu x* @param {Nomor} koordinat sumbu y*/function drawImg(x, y) { ctx.drawImage(img, x - img.width / 2, y - img.height); }//Fungsi draw memerlukan beberapa penyesuaian draw(){ //... if (percent <= 100) { requestAnimationFrame(draw); }else{ ctx.clearRect(0, 0, 1500, 750); //Hapus kanvas segera setelah animasi kurva selesai drawText(data.department, //Render text data.value, data.end[0], data .end[1 ]) drawImg(data.end[0], data.end[1]) //Render gambar setTimeout(function(){ //Gambar ulang init() setelah 2000 md },2000) } } MenyelesaikanKode lengkap dari contoh ini
Kode lengkap contohnya ada di gambar pertama artikel
Artikel referensi: Gunakan kanvas untuk menggambar animasi kurva - pemahaman mendalam tentang kurva Bezier
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.