如何用 canvas 画出下面的图案？

Question

如图，以及如何让图中的曲线段有缓慢起伏晃动的动效?动效如gif里的绿色圆晃动。(画质渣抱歉)

Answer 1

可以利用贝塞尔曲线来绘制，通过调整控制点属性，可以让曲线变化。

有2种贝塞尔曲线，控制点数不同，其实你还可以把多条贝塞尔曲线首尾接起来，形成更复杂的曲线。
下面是一次贝塞尔曲线绘制

ctx.beginPath();
ctx.moveTo(20,80);           // 起点
ctx.quadraticCurveTo(20,100, // 控制点
                    200,20); // 结束点
ctx.stroke();

下面是二次贝塞尔曲线绘制

ctx.beginPath();
ctx.moveTo(20,80);        // 起点
ctx.bezierCurveTo(20,100, // 控制点1
                 200,100, // 控制点2
                 200,20); // 结束点
ctx.stroke();

Answer 2

https://segmentfault.com/a/11... 可以参考这位大神的文章