使用jQuery / javaScript和HTML5画布进行动画制作

Question

我目前正在开发一个Web应用程序，该应用程序以邻接列表格式输入用户的图表，并在此基础上执行各种算法，例如Djisktra算法，Bellman Ford，BFS，DFS等。我面临的唯一问题是关于图表上的动画。

http://postimg.org/image/qa4uto9gd/ （我的工作快照）

基本上，这里用红色绘制的图是我要在BFS / DFS期间应用过渡的图，类似于此http://visualgo.net/dfsbfs.html暂时减去边缘过渡。

我正在使用HTML5画布绘制图形，其中每个节点都用一个圆圈表示，每个边缘都是一个箭头。 我有一个存储每个节点/圆的X和Y坐标的数组。 但是，我想在我的图形上直观显示BFS / DFS效果，即在运行BFS时，

1. 仔细检查的节点会转变为某种颜色（例如蓝绿色）
2. 然后邻居节点经历过渡到某种颜色（再次说蓝绿色）
3. 然后，最初受到检查的节点经历颜色转换为某种较深的颜色（例如较深的蓝绿色），以表明其对邻居的扫描已完成。

上面的变色算法在某种程度上类似于在《算法介绍》第三版，Thomas H. Cormen中给出的那种。我在某种程度上受困于动画部分的实现。 谁能建议我如何使用jQuery执行这些转换？

Answer 1

您不能使用jQuery在画布上为输出设置动画，因为内容不是DOM节点。 jQuery使用DOM节点（元素）及其动画属性，因此使用画布本身（宽度，高度等）-为画布本身设置动画并在其中保持输出的长宽比非常棘手，但是需要另外讨论时间）。 您提供的示例使用SVG（DOM节点），因此可以通过jQuery进行操作。 您需要普通的旧JavaScript来为画布输出的“节点”上色。 看起来小提琴 ,将其拆开并根据需要涂抹。

问题似乎重复出现： 连续颜色过渡