이 기사에서는 참조에 대한 JS Water Wave Background Effect의 구현 코드를 공유합니다. 특정 내용은 다음과 같습니다
생식 이미지 :
구현 코드 :
<! doctype html> <html> <head> <title> 물파 배경 < /title> <meta charset = "gb2312" /> <style> html, body {너비 : 100%; 높이 : 100%; 패딩 : 0; 마진 : 0;} </style> </head> <body> <canvas id = "canvas"style = "위치 : 절대; 상단; 상단 : 0px; 왼쪽 : 0px; z-index : 1;"> "> </canvas> <script type ="text/javaScript "> var canvas = document.getElementBas '); var ctx = canvas.getContext ( '2d'); canvas.width = canvas.parentNode.OffSetWidth; canvas.height = canvas.parentnode.offsetheight; // 브라우저가 requestAnimFrame을 지원하는 경우 requestAnimFrame을 사용하십시오. 그렇지 않으면 settimeout window.requestanimframe = (function () {return Window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.MozRequestAnimationFrame || 함수 (Callback, 100 /60);); // 웨이브 크기 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)]; function loop () {ctx.clearRect (0,0, Canvas.width, canvas.height); 단계 ++; // (var j = lines.length-1; j> = 0; J--) {ctx.fillStyle = lines [j]; // 각 사각형의 각도는 다르고 각각은 45도 차이 var var arle = (step+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+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 (); </script> </body> </html>위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.