Hari ini, editor akan berbagi dengan Anda edisi ketiga belas dari seri koleksi efek khusus front-end web. Teman-teman yang suka bermain-main dengan efek keren, silakan lihat ^_^
Izinkan saya berbagi dengan Anda efek teks aliran air terjun yang dibentuk menggunakan kanvas HTML5, yang sangat keren! Kode yang relevan adalah sebagai berikut:
<!doctype html><html lang=en><head> <meta charset=UTF-8> <title>kain</title> <style> *{ padding: 0; margin: 0;}body{ latar belakang:#000 ;} </style></head><body> <div id=container> <kanvas id=c></canvas></div><script type=text/javascript src=http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js></script><script> var c = document.getElementById(c);var ctx = c.getContext(2d) ;//Buat layar penuh c.height = window.innerHeight;c.width = window.innerWidth;//Karakter Cina dari kumpulan karakter Unicode var cina = igeekbar~;//Mengonversi string menjadi satu karakter dalam array chinese = chinese.split();var font_size = 20;var Columns = c.width/font_size; //Jumlah kolom dalam hujan//Jumlahnya kolom di setiap kolom array var drop = []; // Di bawah ini adalah koordinat x // 1 = y dalam drop (awalnya sama) for(var x = 0; x < kolom; x++) drop[x] = 1 ; //Fungsi gambar draw(){ //Kanvas BG hitam // Track tampilan BG semi-transparan ctx.fillStyle = rgba(0, 0, 0, ctx.fillRect(0, 0, c.width, c. tinggi); ctx.fillStyle = #0F0; //Warna font ctx.font = ukuran_font + px arial; //Ulangi font untuk(var i = 0; i < tetes.panjang; i++) { //Mencetak karakter Cina acak var text = chinese[Math.floor(Math.random()*chinese.length)]; //x = i*font_size, y = nilai tetes[i]; * font_size ctx.fillText(teks, i*font_size, turun[i]*font_size); //Setelah menggambar garis di layar, kirimkan secara acak ke atas //Tambahkan keacakan pada reset sehingga tetesannya tersebar di seluruh sumbu if(drops[i]*font_size > c.height && Math.random( ) > 0,975) tetes[i] = 0; //Peningkatan koordinat Y turun[i]++; }}setInterval(draw, 33);</script></body></html>Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.