canvas三角函數模擬水波效果

 

最近項目中，ui設計了個水波效果的背景動畫，然而並無gif或svg動畫，開始試着用css實現了一下，動畫效果並非很好，網上查了下基本都是用貝賽爾曲線實現，想起以看的各類前波形圖，因而想着用三角函數圖像初略模擬一下

示例效果以下：

 

1、繪製sin函數圖像

sin函數表達式以下，
$$y=Asin（wx+\phi ）+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();                   //閉合路徑
})()

這樣咱們能夠獲得如下圖像：

2、爲函數圖像添加動畫

上面獲得的是是一個靜態的函數圖像，而咱們通常見到的的波形圖或水波都是隨時間連續變化的，這裏就要用到上一步中的參數相位φ，（js即代碼中的Q） ，咱們將φ隨時間不斷增長或減少，便可獲得不一樣時間的不一樣圖像；使用window.requestAnimationFrame實現幀動畫；
修改以上代碼爲：

var speed=-0.02;

(function draw(){
  window.requestAnimationFrame(draw);
  ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.strokeStyle="#000";
  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.stroke();
  ctx.closePath();
})()

效果以下（渣渣截圖軟件）：

3、繪製完整填充路徑

以上路徑雖有閉合，但卻不知足咱們須要填充的部分，直接填充效果以下：

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

閉合路徑後建立一個漸變顏色，做爲填充顏色，代碼以下：

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();
})()

效果以下：

4、完善水波動畫

一、首先能夠對上面波形疊加一個頻率更高的波形，使波形無規矩

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

二、再添加一個相位變化不一樣的波形，其漸變填充與上一個漸變方向相反使其造成相互重疊的陰影效果；

　  並設置路徑重疊效果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();})()