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

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

阅读 1.7k
2 个回答

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

有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();
推荐问题
宣传栏