細膩復雜動畫的制作一般要通過canvas來動態繪制，需要具備一定的算法基礎。

以下js是模擬海浪效果的算法（可直接使用），分享給大家。

<div id="wave" style="width: 200px;height: 100px;"></div> <script>(function () {//自定義命名空間var homePage = {};homePage.color = "#87d6fe"; //設置wave顏色homePage.waveEffect = function () {homePage.wave = document.getElementById("wave"); //選中渲染元素homePage.canvas = document.createElement('canvas');homePage.ctx = homePage.canvas.getContext('2d');homePage.canvas.width = wave.offsetWidth;homePage.canvas.height = wave.offsetHeight;homePage.wave.appendChild(homePage.canvas);homePage.animate();homePage.r = 50 / 100; //設置水面高度(占比畫布)};homePage.animate = function () {var requestAnimationFrame =window.requestAnimationFrame ||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback) {window.setTimeout(callbacks, 1000 / 60); //以一個恰當的幀數渲染動畫};homePage.loop();};homePage.step = 0;homePage.loop = function () {homePage.step += 3; //設置浪花緩急var changeHeight = 15; //設置浪花大小if (homePage.r == 1 || homePage.r == 0) {changeHeight = 0;}var height = homePage.canvas.height - homePage.canvas.height * homePage.r;var angle = homePage.step * Math.PI / 180;var deltaHeight = Math.cos(angle) * changeHeight;var deltaHeightRight = Math.sin(angle) * changeHeight;homePage.ctx.clearRect(0, 0, homePage.canvas.width, homePage.canvas.height);homePage.ctx.beginPath();homePage.ctx.lineWidth = 0;homePage.ctx.fillStyle = homePage.color;homePage.ctx.moveTo(0, height + deltaHeight - changeHeight);homePage.ctx.bezierCurveTo(homePage.canvas.width / 2, height + deltaHeight, homePage.canvas.width / 2, height + deltaHeightRight, homePage.canvas.width, height + deltaHeightRight); //繪制一條三次貝塞爾曲線：homePage.ctx.lineTo(homePage.canvas.width, homePage.canvas.height);homePage.ctx.lineTo(0, homePage.canvas.height);homePage.ctx.lineTo(0, height + deltaHeight - changeHeight);homePage.ctx.closePath();homePage.ctx.fill();requestAnimationFrame(homePage.loop);};window.HomePageJS = homePage;})()HomePageJS.waveEffect();</script>

?

總結

以上是生活随笔為你收集整理的前段JS绘制动态海浪效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。