1

我对它完全canvas陌生并用它来动画对象。我做了一些研究(例如,我找到了 RaphaelJS)但是我找不到任何关于如何创建“变形”圆圈的一般答案或教程。

在此处输入图像描述

我在这里发布的图像是我想做的:我想创建一个通过 a 动画并稍微改变其轮廓的one圆圈。endlesslyrandomizer

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

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

我真的很感激这方面的一些帮助。

先感谢您。

4

3 回答 3

3

一个圆可以通过 4 条三次曲线相当好地近似(每个四分之一和切线上的控制点 - 谷歌以获取控制段的正确长度或自己计算它们 - 请参见此处。然后您可以随机为控制点设置动画小半径以获得摆动效果。

于 2012-11-11T09:39:53.223 回答
1

我是否必须“以数学方式”创建一个圆圈,该圆圈沿边缘有数十个受随机函数影响的锚点?

是的,您可以,尽管不必创建“数十个”。

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

于 2012-11-11T09:39:36.043 回答
0

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

于 2012-11-11T09:42:32.120 回答