javascript - 为教育工具创建逐步点击 HTML5/Javascript 图形

Question

我正在使用 HTML5 和 Javascript 创建一个教育工具，以帮助用户了解投票算法的工作原理。我将通过显示某种图形或动画来逐步完成每个步骤。我实际上是在创建一个 HTML 版本:http://www.chrisgates.net/irv/votesequence.html

我有什么想法可以着手做这件事吗？我一直在试验各种画图和东西的 Canvas 包，但没有任何东西可以帮助逐步完成教程。

Answer 1

本质上，您要做的是根据对按钮或其他 HTML 元素的点击来更改某些 HTML 元素的内容。

您真的不需要为此使用 Canvas。当然，如果你真的想让所有的东西都用线条慢慢延伸等来制作动画，使用 Canvas 会让事情变得容易得多。

当仅使用 Javascript 时，您可以创建包含所需数据的隐藏元素，并在有人单击某个按钮时显示它们(可能是，但不必位于其他隐藏元素之一内)。

如果你真的想用Canvas，我建议你看看Cake.js这是一个基于矢量的 Canvas 库，可以创建类似于您链接中的 Flash 工具的结果。它的使用非常简单，并且有一个(小型)wiki 解释了基本的东西。