使用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. 然后，最初处于审查过程中的节点经历颜色过渡到某种较暗的颜色（比如较暗的深青色）以显示其对邻居的扫描已完成。

上述的颜色改变算法在某种程度上类似于介绍给算法，第三版，托马斯·H·科门 我被困在动画部分以某种方式实施的一个。任何人都可以建议我如何使用jQuery执行这些转换？

Answer 1

由于内容不是DOM节点，因此无法使用jQuery在画布上动画输出。 jQuery与动画的DOM节点（元素）及其属性一起工作，所以对于画布本身（宽度，高度等） - 对画布本身进行动画制作非常棘手，并且保持其内部输出的纵横比，但是对另一个时间）。您提供的示例使用SVG（DOM节点），以便可以通过jQuery进行操作。您需要普通的旧javascript来为您的画布输出的“节点”着色。请看fiddle,挑选它并根据需要应用。

问题似乎重复：Continuous Color Transition