บทความนี้แบ่งปันรหัสการใช้งานของ JS Water Water Have Effect สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ภาพการทำซ้ำ:
รหัสการใช้งาน:
<! doctype html> <html> <head> <dite> พื้นหลังคลื่นน้ำ < /title> <meta charset = "gb2312" /> <style> html, ร่างกาย {ความกว้าง: 100%; ความสูง: 100%; Padding: 0; มาร์จิ้น: 0;} </style> </head> <body> <canvas id = "canvas" style = "ตำแหน่ง: Absolute; top: 0px; ซ้าย: 0px; z-index: 1;"> </canvas> <script type = "javascript"> var canvas = document var ctx = canvas.getContext ('2d'); canvas.width = canvas.parentNode.offsetWidth; Canvas.height = Canvas.parentNode.offSetheight; // ถ้าเบราว์เซอร์รองรับการร้องขอ frame ให้ใช้ requestanimframe มิฉะนั้นให้ใช้ settimeout window.requestanimframe = (function () {return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimation // ขนาดคลื่น var boheight = canvas.height / 10; var posheight = canvas.height / 1.2; // มุมเริ่มต้นคือ 0 var step = 0; // กำหนดสีของสามคลื่นที่แตกต่างกัน var lines = ["RGBA (0,222,255, 0.2)", "RGBA (157,192,249, 0.2)", "RGBA (0,168,255, 0.2)"]; ฟังก์ชั่นลูป () {ctx.clearrect (0,0, canvas.width, canvas.height); ขั้นตอน ++; // วาด 3 สี่เหลี่ยมที่แตกต่างกันสำหรับ (var j = lines.length-1; j> = 0; j--) {ctx.fillstyle = lines [j]; // มุมของสี่เหลี่ยมแต่ละอันแตกต่างกันและแต่ละมุมมีความแตกต่าง 45 องศามุม var = (ขั้นตอน+j*50)*math.pi/180; var deltaheight = math.sin (มุม) * Boheight; var deltaheightright = math.cos (มุม) * boheight; ctx.beginpath (); ctx.moveto (0, posheight+deltaheight); ctx.beziercurveto (Canvas.width / 2, posheight+deltaheight-boheight, Canvas.width / 2, posheight+deltahehight-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 (); </script> </body> </html>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript