最近項目中，ui設計了個水波效果的背景動畫，然而并沒有gif或svg動畫，開始試著用css實現了一下，動畫效果并不是很好，網上查了下基本都是用貝賽爾曲線實現，想起以看的各種前波形圖，于是想著用三角函數圖像初略模擬一下
一、繪制sin函數圖像
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,1)'); (function draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.strokeStyle="#000"; ctx.fillStyle = lingrad; ctx.lineWidth = 1; ctx.moveTo(0, 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)');lingrad2.addColorStop(1, 'rgba(0,186,128,0.8)'); (function draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.fillStyle = lingrad; ctx.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武林網。
新聞熱點
疑難解答
