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

Question

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

我是程序员，但我的强项是PHP，JavaScript，传统HTML等......我还没有机会使用HTML5。

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

KineticJS库看起来也很适合这种类型的动画，但我会把建议留给你们。

无论如何，这是我要复制的例子：

Answer 1

由于@Diodeus指出的相同原因，我不会提供任何图书馆建议，但也许我可以帮助您的选择过程。您正在尝试做的事情现在可以在浏览器中以多种方式完成：Canvas，SVG和/或CSS3动画。

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

canvas元素更适合对网页上的可视内容进行“逐像素”控制。在canvas中添加内容不会增加DOM（与SVG一样），因此它通常会表现得更好，但是你会丢失像本机事件处理程序和动画这样的东西，你最终必须自己重新实现

More about the choice between SVG and Canvas, and an SVG animation example

一旦你有了页面中的组件，它们就需要连线和动画。动画可以分解为：

1. 缩放
2. 背景色褪色
3. 轮换
4. “奇怪的渐变饼计时器”example with CSS3

这些可以使用CSS动画，SVG动画或普通的旧javascript来完成。选择取决于你将要动画的内容。如果我选择了一个库，我会想找到一个试图在可能的时候使用更新的方法（SVG / CSS3），并在它不能时优雅地降级。

我会厌倦那些尝试重新实现浏览器中本机可用内容的库。更多地依靠浏览器而不是自己的代码来执行动画等操作意味着浏览器可以优化其操作并使用硬件加速等功能来提高性能。

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

Answer 2

当然，当你把它分解成碎片时，并不是那么困难。

以下是一些可以帮助您入门的技术和技巧。

使用Canvas（1）显示一些图纸，（2）擦除，（3）显示一些新图纸

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

Html Canvas使用context绘制（将其视为画布的笔）

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

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

• 旋转： context.translate（centerX，centerY）+ context.rotate（radianAngle）将旋转新绘图（如旋转多边形，刻度线）

• 缩放： context.translate（centerX，centerY）+ context.scale（scaleX，scaleY）将缩放您的多边形。

• arcs： context.arc（centerX，centerY，radius，beginningAngle，endingAngle）将绘制一个具有指定中心点的弧，并从起始角度扫描到结束角度。

• 数学： circleCircumferenceX = centerX + radius * Math.cos（radianAngle）circleCircumferenceY = centerY + radius * Math.sin（radianAngle）使用三角法计算圆周上的xy坐标一个圆圈。您可以将此trig + Math.random结合起来，将“斑点”放在围绕中心点的圆弧中。