Cet article partage le code de mise en œuvre de JS Water Wave Background Effect pour votre référence. Le contenu spécifique est le suivant
Image de reproduction:
Code d'implémentation:
<! Doctype html> <html> <éad- head> <itle> Background de l'onde d'eau </title> <meta charset = "gb2312" /> <style> html, body {width: 100%; hauteur: 100%; rembourrage: 0; marge: 0;} </ style> </ head> <body> <canvas id = "canvas" style = "position: absolue; top: 0px; gauche: 0px; z-index: 1;"> </ canvas> <script type = "text / javascript"> var canvas = document.getElementyd ('Canvas'); var ctx = canvas.getContext ('2d'); canvas.width = canvas.parentNode.offsetWidth; canvas.height = canvas.parentNode.offsetHeight; // Si le navigateur prend en charge DequestanImFrame, utilisez RequestanImFrame, sinon utilisez setTimeOut Window.requestanImFrame = (function () {return window.requestanimationframe || window.webkitRequestanimationFrame || window.mozrequestanimationframe || function (Callback) {window.settimeout (callback, 1000/60);};););); // taille d'onde var boheight = canvas.height / 10; var posheight = canvas.height / 1.2; // L'angle initial est 0 var étape = 0; // Définissez les couleurs de trois lignes de var différentes var = ["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); Step ++; // dessine 3 rectangles de différentes couleurs pour (var j = lignes.length - 1; j> = 0; j--) {ctx.fillStyle = lignes [j]; // L'angle de chaque rectangle est différent, et chacun a un angle VAR de différence de 45 degrés = (étape + j * 50) * math.pi / 180; var deltaHeight = math.sin (angle) * boheight; var deltaHeightright = math.cos (angle) * boheight; ctx.beginPath (); ctx.moveto (0, posheight + deltaheight); ctx.beziercurveto (canvas.width / 2, posheight + deltaheight-boheight, toile.width / 2, posheight + deltaheightright-boheight, toile.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); } boucle(); </cript> </ body> </html>Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.