Html5、svg、canvasで滑らかな波を作成するには？

Question

html、svg、またはキャンバスで4時間の波を検索しましたが、写真のように見えるものは何も見つかりませんでした。

どうすればこのような波を作成できますか？滑らかな結末と色でいっぱい？

Answer 1

この形状は、キャンバスにbezierCurveTo()を用いて達成することができます。シェイプもSVGでも可能だと思いますが、私はそれに精通していないので、以下はキャンバスのデモンストレーションです。

スニペットは借用され、MDNの記事から適合されます。基本的には、コントロールポイントを開始点と終了点と同じy軸に保つベジエ曲線が必要です。制御点をx軸に沿って移動させることにより、曲線を多かれ少なかれ劇的にします。第1の制御点と第2の制御点が始点と終点に向かうほど（それぞれ）、曲線がより劇的になります。

グラフをキャンバスに直線を使って作成し、その事実の後にベジェ曲線になるように調整します。

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var hw = 10, ho = hw/2; 
 

 
var x1 = 50, y1 = 20, 
 
    x2 = 230, y2 = 100, 
 
    cp1x = 120, cp1y = 20, 
 
    cp2x = 160, cp2y = 100; 
 
    
 

 
ctx.beginPath(); 
 
ctx.moveTo(x1,y1); 
 
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2); 
 
ctx.stroke(); 
 

 
ctx.fillStyle = 'blue'; 
 
// start point 
 
ctx.fillRect(x1 - ho, y1 - ho, hw, hw); 
 
// end point 
 
ctx.fillRect(x2 - ho, y2 - ho, hw, hw); 
 

 
ctx.fillStyle = 'red'; 
 
// control point one 
 
ctx.fillRect(cp1x - ho, cp1y - ho, hw, hw); 
 
// control point two 
 
ctx.fillRect(cp2x - ho, cp2y - ho, hw, hw);

<canvas id="canvas"></canvas>