如何在Html5，svg，canvas中创建平滑的wave？

 <path id="wave" d="M0 100 Q125 150 250 100 T500 100 V200 H0 Z" fill="#00f">

   <animate attributeName="d" dur="5s" repeatCount="indefinite"

     values="M0 100 Q125 50 250 100 T500 100 V200 H0 Z;

             M0 100 Q125 150 250 100 T500 100 V200 H0 Z;

             M0 100 Q125 250 250 100 T500 100 V200 H0 Z;

             M0 100 Q125 150 250 100 T500 100 V200 H0 Z" />

 </path>

 const canvas = document.getElementById('waveCanvas');

 const ctx = canvas.getContext('2d');

 let phase = 0;

 function drawWave() {

   ctx.clearRect(0, 0, canvas.width, canvas.height);

   ctx.beginPath();

   ctx.moveTo(0, canvas.height / 2);

   for (let x = 0; x < canvas.width; x++) {

     const y = Math.sin(x / 50 + phase) * 50 + canvas.height / 2;

     ctx.lineTo(x, y);

   }

   ctx.lineTo(canvas.width, canvas.height);

   ctx.lineTo(0, canvas.height);

   ctx.closePath();

   ctx.fillStyle = '#00f';

   ctx.fill();

   phase += 0.05;

   requestAnimationFrame(drawWave);

 }

 drawWave();