canvas三角函數模擬水波效果的範例程式碼

在最近專案中，ui設計了個水波效果的背景動畫，然而並沒有gif或svg動畫，開始試著用css實現了一下，動畫效果並不是很好，網上查了下基本都是用貝賽爾曲線實現，想起以看的各種前波形圖，於是想著用三角函數影像初略模擬一下

sin函數表達式如下，

y=Asin（wx+φ）+h

其中A表示振幅，ω表示角頻率（ω=2π/T,T為函數的週期），φ表示初相，h表示影像向y軸正方向平移的長度；（這裡要注意一下：h在數學學的本來是表示向上平移的，但在canvas中採用的是螢幕座標系，即左上角為原點，h則表示向下平移）；

繪製程式碼如下：

（1）新增canvas標籤

 <canvas id=canvas></canvas>

（2）新增css樣式,設定canvas寬高

 html,body { padding: 0; margin: 0; width: 100%; height: 100%;}canvas { width: 100%; height: 100%;}

（3）繪製函數影像

 var canvas = document.getElementById(canvas), ctx = canvas.getContext('2d'), width = canvas.width = canvas.offsetWidth, height = canvas.height = canvas.offsetHeight;//聲明參數var A=50, W=1 / 50, Q=0, H= height / 2;//繪圖方法(function draw(){ ctx.clearRect(0, 0, width, height);//清空畫布ctx.beginPath(); //開始路徑ctx.strokeStyle=#000; //設定線條顏色ctx.lineWidth = 1; //設定線條寬度ctx.moveTo(0, height /2); //起始點位置for (let x = 0; x <= width; x++) {// 繪製x對應y的var y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) } ctx.stroke(); / /繪製路徑ctx.closePath(); //閉合路徑})()

這樣我們可以得到以下圖像：

上面得到的是一個靜態的函數圖像，而我們一般見到的的波形圖或水波都是隨時間連續變化的，這裡就要用到上一步中的參數相位φ，（js即程式碼中的Q ） ，我們將φ隨時間不斷增加或減小，即可得到不同時間的不同圖片；使用window.requestAnimationFrame實作影格動畫；

修改以上程式碼為：

 var canvas = document.getElementById(canvas), ctx = canvas.getContext('2d'), width = canvas.width = canvas.offsetWidth, height = canvas.height = canvas.offsetHeight;//聲明參數var A=50, W=1 / 50, Q=0, H= height / 2;//繪圖方法(function draw(){ ctx.clearRect(0, 0, width, height);//清空畫布ctx.beginPath(); //開始路徑ctx.strokeStyle=#000; //設定線條顏色ctx.lineWidth = 1; //設定線條寬度ctx.moveTo(0, height /2); //起始點位置for (let x = 0; x <= width; x++) {// 繪製x對應y的var y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) } ctx.stroke(); / /繪製路徑ctx.closePath(); //閉合路徑})()

效果如下（渣渣截圖軟體）：

以上路徑雖有閉合，卻不符合我們需要填滿的部分，直接填充效果如下：

完整填充路徑應如圖所示：

閉合路徑後建立漸層顏色，作為填滿顏色，程式碼如下：

 var lingrad = ctx.createLinearGradient(0,0,width,0); lingrad.addColorStop(0, 'rgba(0,186,128,0.8)'); lingrad.addColorStop(1, 'rgba(111,224,195,function');function' draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.strokeStyle=#000; ctx.fillStyle = lingrad; ctx.lineWidctth = 1; 000xmovex. , height /2); Q+=speed; for (let x = 0; x <= width; x++) { var y = A*Math.sin(W*x+Q) +H; ctx.lineTo(x, y); } ctx.lineTo(width, height); ctx.lineTo (0, height); ctx.fill(); ctx.closePath();})()

效果如下：

1.首先可以對上面波形疊加一個頻率較高的波形，使波形無規矩

 var s = 0.1*Math.sin(x/150)+1;var y = A*Math.sin(W*x+Q) +H;y=y*s;

2.再增加一個相位變化不同的波形，其漸變填充與上一個漸變方向相反使其形成相互重疊的陰影效果；並設定路徑重疊效果globalCompositeOperation；

 var canvas = document.getElementById(canvas), ctx = canvas.getContext('2d'), width = canvas.width = canvas.offsetWidth, height = canvas.height = canvas.offsetHeight;var A=30, W=1 / 200, Q=0, H= height / 2;var A2=30, W2=1/300, Q2=0, H2= height / 2;var speed=-0.01;var speed2=-0.02;var lingrad = ctx.createLinearGradient(0,0,width,0);lingrad.addColorStop(0, 'rgba(0,186,128,0.8)');lingrad.addColorStop(1, 'rgba(111,224,195,1)'); var lingrad2 = ctx.createLinearGradient(0,0,width,0);lingrad2.addColorStop(0,'rgba(111,224,195,1)');d2. 'rgba(0,186,128,0.8)'); (function draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.begin(); ctx.fillctle = ling. moveTo(0, height /2); //繪製第一個波形Q+=speed; for (let x = 0; x <= width; x++) { var s = 0.1*Math.sin(x/150)+1; var y = A*Math.sin (W*x+Q) +H; y=y*s; ctx.lineTo(x, y); } ctx.lineTo(width, height); ctx.lineTo(0, height); ctx.fill(); ctx.closePath() //設定重疊效果ctx.globalCompositeOperation = destination-over //繪製第二個波形ctx.beginPath(); ctx.fillStyle = lingrad2 ; Q2+=speed2; for (let x = 0; x < width; x++) { var y = A2*Math.sin(x*W2+Q2) +H2; ctx.lineTo(x, y); } ctx.lineTo(width,height); ctx.lineTo(0,height); ctx.fill() ctx. closePath();})()

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。