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

Question

在html，svg或canvas中搜索wave的4小时但没有找到图片中的任何内容。

如何创建这样的wave？光滑的结尾和充满色彩？

Answer 1

可以使用画布中的documentation来实现此形状。我确定SVG中的形状是可行的，但我并不熟悉它，所以下面是画布演示。

该片段是借鉴并改编自MDN文章。基本上，您需要一条贝塞尔曲线，将控制点保持在与起点和终点相同的y轴上。通过沿x轴移动控制点，使曲线或多或少显着。第一个控制点和第二个控制点距离起点和终点越远，曲线就越显着。

我首先要使用直线在画布上构建图形，然后将它们调整为贝塞尔曲线。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;