Javascript 这个序列可以在HTML5中完成吗？

我当然不希望有人真的为此提供有效的解决方案。我在这一点上的问题很简单：这可以用HTML5画布来完成吗，或者我会在尝试中旋转轮子吗

我是一名程序员，但我的专长是PHP、JavaScript、传统HTML等等……我还没有机会玩HTML5

您在示例中看到的元素，我可以根据需要单独保存。因此，为了使块围绕中心旋转，我想我保存了一个正方形图像，块分别位于适当的角落。然后旋转图像将适当地围绕中心旋转，除非您可以在PhotoShop上设置图像的原点

KineticJS库看起来也适合这种类型的动画，但我将把建议留给你们这些优秀的人

无论如何，下面是我要复制的示例：

---

出于@Diodeus指出的相同原因，我不会给出任何图书馆推荐，但也许我可以帮助您选择图书馆。您现在可以通过多种方式在浏览器中进行操作：画布、SVG和/或CSS3动画

上面的示例基本上是一些矢量图形，它们与中心“饼图计时器”上的渐变组合在一起。因此，我倾向于使用SVG，特别是如果您希望允许与组件交互（每个SVG元素都可以有事件处理程序）

canvas

元素更适合“逐像素”控制页面上的视觉内容。在

canvas

中添加内容不会增加DOM（与SVG一样），因此它通常会表现得更好，但您会丢失一些东西，如本机事件处理程序和动画，最终不得不自己重新实现

一旦页面中有了这些组件，就需要将它们连接起来并设置动画。动画可以分解为：

缩放

背景色褪色

轮换

“奇怪的梯度饼图计时器”

这些可以通过CSS动画、SVG动画或普通的旧javascript来完成。选择取决于要设置动画的内容。如果我选择一个库，我希望找到一个在可能的时候尝试使用较新方法（SVG/CSS3）的库，在不能使用的时候优雅地降级

我会对那些试图重新实现浏览器中已有的东西的库感到厌倦。更多地依赖浏览器而不是您自己的代码来执行动画等操作，这意味着浏览器可以优化其操作，并使用硬件加速等功能来提高性能

---

希望这能帮助你选择图书馆。记住，图书馆总是来来去去去，所以不要太执着于图书馆。理想的实现应该允许您轻松交换动画或显示代码，而无需接触其他不相关的部分。

我不会给出任何库建议，原因与@Diodeus指出的相同，但也许我可以帮助您进行选择。您现在可以通过多种方式在浏览器中进行操作：画布、SVG和/或CSS3动画

上面的示例基本上是一些矢量图形，它们与中心“饼图计时器”上的渐变组合在一起。因此，我倾向于使用SVG，特别是如果您希望允许与组件交互（每个SVG元素都可以有事件处理程序）

canvas

元素更适合“逐像素”控制页面上的视觉内容。在

canvas

中添加内容不会增加DOM（与SVG一样），因此它通常会表现得更好，但您会丢失一些东西，如本机事件处理程序和动画，最终不得不自己重新实现

一旦页面中有了这些组件，就需要将它们连接起来并设置动画。动画可以分解为：

缩放

背景色褪色

轮换

“奇怪的梯度饼图计时器”

这些可以通过CSS动画、SVG动画或普通的旧javascript来完成。选择取决于要设置动画的内容。如果我选择一个库，我希望找到一个在可能的时候尝试使用较新方法（SVG/CSS3）的库，在不能使用的时候优雅地降级

我会对那些试图重新实现浏览器中已有的东西的库感到厌倦。更多地依赖浏览器而不是您自己的代码来执行动画等操作，这意味着浏览器可以优化其操作，并使用硬件加速等功能来提高性能

---

希望这能帮助你选择图书馆。记住，图书馆总是来来去去去，所以不要太执着于图书馆。理想的实现应该允许您轻松地交换动画或显示代码，而不必接触其他不相关的部分。

当然，当您将其分解为多个部分时，这并不困难

以下是一些技术和技巧，让您开始学习

您可以通过（1）显示一些图形，（2）擦除，（3）显示一些新图形来使用画布

当你快速重画时，你会得到像你的图像那样的动画效果

Html画布使用

上下文

进行绘制（将其视为画布的笔）

• 绘制路径：context.beginPath+context.moveTo+context.lineTo将定义创建“风扇叶片”多边形的路径。可以使用context.fillStyle用颜色填充多边形

• 褪色：context.globalAlpha将更改新图形的不透明度

• 旋转：上下文。平移（centerX，centerY）+上下文。旋转（radianAngle）将旋转新图形（如旋转多边形、记号、，