تشارك هذه المقالة رمز التنفيذ لتأثير خلفية موجة المياه في JS للرجوع إليه. المحتوى المحدد كما يلي
صورة التكاثر:
رمز التنفيذ:
<! doctype html> <html> <head> <title> خلفية موجة الماء < /title> <meta charset = "gb2312" /> <style> html ، الجسم {width: 100 ٪ ؛ الارتفاع: 100 ٪ الحشو: 0 ؛ الهامش: 0 ؛} </style> </head> <body> <canvas id = "canvas" style = "الموضع: المطلق ؛ أعلى: 0px ؛ اليسار: 0px ؛ z-index: 1 ؛ var ctx = canvas.getContext ('2d') ؛ canvas.width = canvas.parentnode.offsetWidth ؛ canvas.height = canvas.parentnode.offsetheight ؛ // إذا كان المتصفح يدعم requestAnimFrame ، فاستخدم requestAnimFrame ، وإلا استخدم window.requestanimframe = (function () {return window.requestanimationframe || window.webkitrequestanimationframe || // حجم الموجة var behight = canvas.height / 10 ؛ var posheight = canvas.hight / 1.2 ؛ // الزاوية الأولية هي 0 var step = 0 ؛ // تحديد ألوان ثلاثة خطوط مختلفة للأمواج = ["RGBA (0،222،255 ، 0.2)" ، "RGBA (157،192،249 ، 0.2)" ، "RGBA (0،168،255 ، 0.2)"] ؛ وظيفة loop () {ctx.clearrect (0،0 ، canvas.width ، canvas.height) ؛ خطوة ++ ؛ // ارسم 3 مستطيلات من الألوان المختلفة لـ (var j = lines.length-1 ؛ j> = 0 ؛ j--) {ctx.fillstyle = lines [j] ؛ // زاوية كل مستطيل مختلفة ، ولكل منها اختلاف 45 درجة var angle = (الخطوة+J*50)*Math.pi/180 ؛ var deltaheight = math.sin (angle) * Beahight ؛ var deltaheightright = math.cos (angle) * beahight ؛ 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.hight) ؛ ctx.lineto (0 ، posheight+deltaheight) ؛ ctx.closepath () ؛ ctx.fill () ؛ } requestAnimFrame (loop) ؛ } حلقة()؛ </script> </body> </html>ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.