Javascript & Canvas：轻微变形圆圈的无尽随机动画？答案

【问题标题】：Javascript & Canvas: Endless random animation of slightly morphing circle?Javascript & Canvas：轻微变形圆圈的无尽随机动画？
【发布时间】：2012-11-11 18:02:08
【问题描述】：

我对@987654323@ 和使用它为对象制作动画完全不熟悉。我做了一些研究（例如，我找到了RaphaelJS）但是我找不到任何关于如何创建“变形”圆的一般答案或教程。

我在这里发布的图片是我想做的：我想创建one 圆圈，它是通过randomizer 动画的endlessly 并且略微变形其轮廓。

我知道这对于这个论坛来说可能不是一个“真正的”问题，但我只是想知道是否有人可以提供一些关于如何做类似事情的提示或技巧。

通过“如何做这样的事情”，我实际上是在谈论如何使圆变形的技术。我是否必须“以数学方式”创建一个圆形，其中沿边缘有数十个受随机函数影响的锚点？

我非常感谢您对此提供一些帮助。

提前谢谢你。

【问题讨论】：

标签： javascript canvas html5-canvas

【解决方案1】：

一个圆可以通过 4 条三次曲线相当好地逼近（每个四分之一曲线和切线上的控制点 - 谷歌搜索控制段的正确长度或自行计算 - 请参阅 here。然后您可以随机为小半径内的控制点设置动画以获得摆动效果。

【讨论】：

【解决方案2】：

我是否必须“以数学方式”创建一个圆形，沿边缘有几十个锚点，这些锚点受随机函数的影响？

是的，你会这样做，尽管不必创建“几十个”。

您可能会发现 .bezierCurveTo() 和 .quadraticCurveTo() 函数可用于在控制点之间提供平滑的插值曲线。

【讨论】：

【解决方案3】：

当您可以使用光栅图像时，您可以使用 sin 函数沿 x 轴对每个点进行位移。您可以沿 y 轴运行相同的函数，但要简单地置换像素，您可以将其加倍。这应该会给你一个变形圆，但它也适用于其他形状。

【讨论】：