Artikel ini membagikan kode implementasi efek latar belakang gelombang air JS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Gambar reproduksi:
Kode Implementasi:
<! Doctype html> <html> <head> <title> latar belakang gelombang air </itement> <meta charset = "gb2312" /> <tyle> html, body {width: 100%; Tinggi: 100%; Padding: 0; margin: 0;} </tyle> </head> <body> <canvas id = "canvas" style = "Posisi: absolute; atas: 0px; kiri: 0px; z-index: 1;"> </an canvas> <script type = "text/javascript"> var canvas = document.getElementByid ('cancrip')); var ctx = canvas.getContext ('2d'); canvas.width = canvas.parentnode.offsetWidth; canvas.height = canvas.parentnode.offsetHeight; // Jika browser mendukung requestanImFrame, gunakan requestanImFrame, sebaliknya gunakan setTimeout window.requestanImframe = (function () {return window.requestanimationframe || window.webkitrequestanimationFrame || window.mozrequestanimationframe || function (callback) {callback); }) (); // ukuran gelombang var boheight = canvas.height / 10; var Posheight = Canvas.Height / 1.2; // Sudut awal adalah 0 var step = 0; // Tentukan warna tiga gelombang yang berbeda var lines = ["RGBA (0,222.255, 0,2)", "RGBA (157.192.249, 0,2)", "RGBA (0,168.255, 0,2)"]; function loop () {ctx.clearrect (0,0, canvas.width, canvas.height); Langkah ++; // Gambar 3 persegi panjang warna yang berbeda untuk (var j = lines.length-1; j> = 0; j--) {ctx.fillstyle = lines [j]; // Sudut masing-masing persegi panjang berbeda, dan masing-masing memiliki perbedaan 45 derajat Var Angle = (Langkah+J*50)*Math.pi/180; var deltaheight = math.sin (sudut) * boheight; var deltaheightright = math.cos (sudut) * boheight; ctx.beginpath (); ctx.moveto (0, posheight+deltaheight); ctx.beziercurveto (canvas.width / 2, posheight+deltaheight-boheight, canvas.width / 2, posheight+deltaheightright-boheight, canvas.width, posheight+deltaheightright); ctx.lineto (canvas.width, canvas.height); ctx.lineto (0, canvas.height); ctx.lineto (0, posheight+deltaheight); ctx.closepath (); ctx.fill (); } requestanimframe (loop); } lingkaran(); </script> </body> </html>Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.