（O(∩_∩)O哈哈哈~作者我能看這個動畫看一下午）

上升水波.gif

動畫分析
構成：貝塞爾曲線
畫布：Canvas
效果：波浪漲潮（上升、波動）
觸發條件：點擊按鈕

貝塞爾曲線.gif

算法實現分析：從sin（）函數切入，sin()越大波度起伏越大，簡單說就是通過不斷改變sin()值來實現海浪效果動畫

干貨開始：

 button type= button  quot;Beisizer() //點擊時觸發JS事件 quot;bcd() //鼠標經過時JS事件 onmouseleave= out() //鼠標離開時JS事件 id= Anniu 確 nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp 定 /button 

 canvas id= Theback /canvas 

//獲取畫布 var beisizer = document.getElementById( Theback  var ContenofBeisizer = beisizer.getContext( 2d  //設置波浪海域（海浪寬度，高度） var beisizerwidth = beisizer.width; var beisizerheight = beisizer.height; var beisizerlinewidth = 2; var sinX = 0; var sinY = beisizerheight/2.0; var axisLenght = beisizerwidth;//弧度寬度 var waveWidth = 0.014;//海浪高度 var waveHeight = beisizerheight / 15.0;ContenofBeisizer.lineWidth = beisizerlinewidth;

 var drawSin = function (xofspeed) { ContenofBeisizer.save(); //存放貝塞爾曲線的各個點 var points = []; ContenofBeisizer.beginPath(); //創建貝塞爾點 for (var x = sinX;x sinX +axisLenght;x+=80/axisLenght){ // var y = -Math.sin((sinX+x)*waveWidth); 測試請解開注釋，注釋下一行 var y = -Math.sin((sinX+x)*waveWidth+xofspeed); // points.push([x,sinY + y * waveHeight]); 測試請解開注釋，注釋下一行 points.push([x,rand+y*waveHeight]);  // ContenofBeisizer.lineTo(x,sinY + y * waveHeight); 測試請解開注釋，注釋下一行 ContenofBeisizer.lineTo(x,rand + y * waveHeight);  ContenofBeisizer.lineTo(axisLenght,beisizerheight); ContenofBeisizer.lineTo(sinX,beisizerheight); ContenofBeisizer.lineTo(points[0][0],points[0][1]); ContenofBeisizer.stroke(); ContenofBeisizer.restore(); //貝塞爾曲線樣式設置 ContenofBeisizer.strokeStyle = #3bc777  ContenofBeisizer.fillStyle = #3bc777  ContenofBeisizer.fill(); };

這一段代碼已經完成靜態貝賽爾曲線的繪制了，可以通過解開以下語句嘗試運行看下效果。
var y = -Math.sin((sinX+x)*waveWidth);
points.push([x,rand+y*waveHeight]);
var y = -Math.sin((sinX+x)*waveWidth+xofspeed);
運行方法執行 drawSin()

靜態貝塞爾曲線.png

需要在屬性中加入一下代碼進行速率的設置
var speed = 0.1; 數值越大速率越快
var xofspeed = 0; 波浪橫向的偏移量
var rand = beisizerheight;波浪高度

 var rendY = function () { ContenofBeisizer.clearRect(0,0,beisizerwidth,beisizerheight); //控制海浪高度 var tmp = 0.1; rand-=tmp; var b = beisizerheight - rand; //控制循環漲潮 if (parseInt(b)==beisizerheight){ rand = beisizerheight; drawSin(xofspeed); drawSinl(xofspeed); xofspeed += speed; requestAnimationFrame(rendY); };

通過調用自身產生不同的高度，來產生海浪效果。這里設置的屬性值配合第四步畫貝塞爾曲線一起進行理解。
運行方式 rendY();

貝賽爾曲線也可以制作音波，心跳儀等。可以嘗試改變頻率值來實現。

【相關推薦】

1. 免費h5在線視頻教程

2. HTML5 完整版手冊

3. VeVb.com原創html5視頻教程

以上就是分享一個利用HTML5制作的海浪效果代碼的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。