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

【问题标题】：Can this sequence be done in HTML5?这个序列可以在 HTML5 中完成吗？
【发布时间】：2014-03-26 12:02:13
【问题描述】：

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

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

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

KineticJS 库看起来也适合这种类型的动画，但我会将建议留给各位好心人。

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

【问题讨论】：

它“可以”使用 Canvas 或 SVG 完成，但它本身就是一个项目。这个问题的范围对于 StackOverflow 来说有点过于宽泛了。
@Diodeus 谢谢。我知道它很广泛；但就像我说的，我不希望任何人真正提供解决方案。 KineticJS 似乎可以做你在那里看到的一切，这本质上是旋转和缩放。对我来说，可行性的唯一问号是中间的计时器。
一般来说，图书馆推荐问题是封闭的，因为它们很快就会过时并且有很强的固执己见。您可能会在特定的实施问题中找到更好的成功，因为您掌握了一些代码。祝你好运。这听起来像是一个漂亮的小项目。

【解决方案1】：

出于@Diodeus 指出的相同原因，我不会提供任何图书馆推荐，但也许我可以帮助您进行选择。您现在可以在浏览器中以多种方式完成您想要做的事情：Canvas、SVG 和/或 CSS3 动画。

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

canvas 元素更适合“逐像素”控制页面上的视觉内容。在canvas 中添加内容不会增长 DOM（就像使用 SVG 一样），因此它通常会表现得更好，但是您会丢失诸如本机事件处理程序和动画之类的东西，您最终将不得不自己重新实现。

一旦您在页面中拥有组件，就需要对它们进行连接和动画处理。动画可以分解为：

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

我会厌倦那些试图重新实现浏览器原生可用的东西的库。更多地依赖浏览器而不是你自己的代码来做动画之类的事情意味着浏览器可以优化其操作并使用硬件加速之类的东西来提高你的性能。

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

【讨论】：

感谢您的报道！不过，作为记录，我不认为我的梯度饼计时器有什么奇怪。 ;)
哈哈是的 :) 这是我能想到的最好的通用术语来描述这种类型的动画。看起来像一个整洁的项目！完成后很高兴看到实现。祝你好运
如果风扇叶片是图像（而不是原生绘制的形状或路径），SVG 是否仍然是一个可行的选择？我是 SVG 新手。
是的——您可以将图像与其他 SVG 元素一起使用。这样做的好处是所有组件都将位于同一坐标系中，并且您可以使用在非图像元素上使用的相同变换/动画操作。 (w3.org/TR/SVG/struct.html#ImageElement)
没错！顺便说一句，我偶然发现了这篇关于为网络导出 .svg 的文章，您可能会觉得有趣：adobe.com/inspire/2013/09/exporting-svg-illustrator.html

【解决方案2】：

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

这里有一些技术和技巧可以帮助您入门。

您通过 (1) 显示一些绘图，(2) 擦除，(3) 显示一些新绘图来使用 Canvas

当您快速重绘时，您会获得类似于图像显示的动画效果。

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

绘制路径： context.beginPath + context.moveTo + context.lineTo 将定义创建“扇形叶片”多边形的路径。您可以使用 context.fillStyle 用您的颜色填充多边形。
fading： context.globalAlpha 将改变新绘图的不透明度
rotating： context.translate(centerX,centerY) + context.rotate(radianAngle) 将旋转新的绘图（如旋转的多边形、刻度线）
缩放： context.translate(centerX,centerY) + context.scale(scaleX,scaleY) 将缩放您的多边形。
arcs： context.arc(centerX,centerY,radius,beginningAngle,endingAngle) 将绘制一条具有指定中心点并从开始角度扫到结束角度的弧。 p>
math: circleCircumferenceX = centerX+radius*Math.cos(radianAngle) circleCircumferenceY = centerY+radius*Math.sin(radianAngle) 使用三角函数计算圆周上的 xy 坐标一个圆圈。您可以将此 trig + Math.random 结合起来，将“斑点”放置在围绕中心点的圆弧中。

【讨论】：

谢谢马克！实际上，对于风扇叶片元素、刻度线和蓝色自动收报机内外的圆圈，我想我可以使用预制图像 (PNG) 并适当地缩放和旋转它们，这样我就不必绘制新的了形状。想法？
圆圈和刻度可以轻松缩放/旋转。如果您的 gif 是通过缩放刀片图像创建的，那么您也可以缩放/旋转刀片。从视觉上看，刀片的阴影连接器部分的缩放比例与刀片的矩形部分不同——但我可能看错了。刀片的矩形部分可以是刻度。刀片的阴影连接器部分可能需要一个简单的路径和填充。
实际上，刀片的矩形和深度/阴影是一个单一的图像，因此它的缩放比例相同。这是一种深度的视觉错觉，因为阴影部分终止于整个图像中心的一个端点，我在进行缩放时对锚点很生气，所以它从图像的中心向外缩放，而不是自己图层的中心。因此，从字面上看，您所看到的只是左上角刀片的缩放、中心蓝色派的滴答声、一些透明度以及刀片的明显旋转。
刀片诡计！是的，那么您可以使用图像进行缩放/旋转。画布围绕一个固定点旋转和缩放——这就是为什么在旋转和缩放之前有一个 context.translate。
我不想旋转整个画布，对吗？由于并非所有元素都旋转...