Javascript 旋转轮或360度旋转轮

我正在寻找一些jquery插件或任何用于多个旋转轮子或360度旋转轮子的代码示例。附件是演示图像，我正在寻找解决方案，其中所有的轮子可以旋转，这基本上是开发生日选择有点像桌面和移动应用程序…但我需要我的web应用程序。我正在使用PHP和apacheweb服务器

提前感谢您提出的任何想法、相同的代码或类似的解决方案

---

-Himanshu

我不知道任何现成的解决方案，但我可以为您指出两个方向，您可以走：

• 您可以为3个不同轮子中的每一个制作一个具有正确大小的图像，然后使用css3转换使用javascript（）旋转特定轮子
• 另一个选项是查看html5画布标记，并用手在其上绘制轮子。这是一个教程，介绍了如何在画布标签上制作轮盘赌游戏，这与您的要求大不相同，但描述了必要的技术

  ---

我不知道任何现成的解决方案，但我可以向您指出两个方向，您可以走：

• 您可以为3个不同轮子中的每一个制作一个具有正确大小的图像，然后使用css3转换使用javascript（）旋转特定轮子
• 另一个选项是查看html5画布标记，并用手在其上绘制轮子。这是一个教程，介绍了如何在画布标签上制作轮盘赌游戏，这与您的要求大不相同，但描述了必要的技术

  ---

我不知道有一个jQuery插件可以完全按照您的要求运行。在浏览器兼容性方面，我建议您看看优秀的JavaScript库。它允许您使用矢量图形绘制和旋转轮子。最重要的是，该库与IE6+兼容，适用于大多数（如果不是所有的话）现代网络浏览器，包括平板电脑和手机

为了便于创建必要的矢量图形，您可以在自己选择的矢量图像编辑器（例如Illustrator、Inkscape等）中绘制控制盘，并将矢量图像保存为SVG文件。一个叫做SVG的非常方便的在线配套工具将SVG文件作为输入，并生成必要的JavaScript来自动绘制图形

---

如果您在JavaScript中将矢量图形的路径作为一个对象，那么使用

元素.rotate（）

方法旋转它就很容易了。

我不知道有一个jQuery插件可以完全按照您的要求执行操作。在浏览器兼容性方面，我建议您看看优秀的JavaScript库。它允许您使用矢量图形绘制和旋转轮子。最重要的是，该库与IE6+兼容，适用于大多数（如果不是所有的话）现代网络浏览器，包括平板电脑和手机

为了便于创建必要的矢量图形，您可以在自己选择的矢量图像编辑器（例如Illustrator、Inkscape等）中绘制控制盘，并将矢量图像保存为SVG文件。一个叫做SVG的非常方便的在线配套工具将SVG文件作为输入，并生成必要的JavaScript来自动绘制图形

---

如果您在JavaScript中将矢量图形的路径作为对象，则可以使用

元素.rotate（）

方法轻松旋转它。

尽管我不确定是否存在用于此目的的插件；在我当前的项目中，我们使用CanvasAPI创建了一个上下文菜单，它与您的需求没有太大的不同，如果不是有点复杂的话。因此，如果您没有受到限制，我强烈建议您使用HTML5画布api来实现这一点。您可以使用交互式花卉教程中的一些想法

如果您对使用jQuery感兴趣，这也会有所帮助。

---

尽管我不确定是否存在用于此目的的插件；在我当前的项目中，我们使用CanvasAPI创建了一个上下文菜单，它与您的需求没有太大的不同，如果不是有点复杂的话。因此，如果您没有受到限制，我强烈建议您使用HTML5画布api来实现这一点。您可以使用交互式花卉教程中的一些想法

如果您对使用jQuery感兴趣，这也会有所帮助。

是的，HTML5 canvas rotate（）就是解决这个问题的方法。我的网站有一个使用画布旋转的获胜轮子，但只用于一个轮子图像。该代码已被完整注释，因此您可能会发现它是一个有用的起点

对于项目，可能需要将多个图像渲染到画布并旋转到所需角度。此外，您可能还需要查看mouseDown、mouseMove和mouseUp代码，以允许用户将控制盘拖动到所需的位置，并且代码能够告诉您所指向的值（我获胜的控制盘中的代码也可以这样做）。

是的，HTML5 canvas rotate（）就是这样做的方法。我的网站有一个使用画布旋转的获胜轮子，但只用于一个轮子图像。该代码已被完整注释，因此您可能会发现它是一个有用的起点

---

对于项目，可能需要将多个图像渲染到画布并旋转到所需角度。此外，您可能还需要查看mouseDown、mouseMove和mouseUp代码，以允许用户将控制盘拖动到所需的位置，并且代码能够告诉您所指的值（我获胜的控制盘中的代码也可以做到这一点）。

您好，David，感谢您的提示响应。我有lreadt检查第二个链接，但它有一些跨浏览器的问题，特别是IE，它现在在IE中工作。。。。让我试着分析一下第一个链接，这两个链接在IE9之前都不起作用，如果你想让它与IE8兼容，你要么旋转图像服务器端，要么使用ms特有的技巧。如果您想采用“干净”方法，可以在此处查看compability表（第一种方法