使用 jQuery/javaScript 和 HTML5 canvas 制作动画
Use jQuery/javaScript and HTML5 canvas for animation
我目前正在开发一个网络应用程序，它以邻接列表格式输入用户的图形，并在此基础上执行各种算法，例如 Djisktra 算法、Bellman Ford、BFS、DFS 等。我面临的唯一问题是图表上的动画。
http://postimg.org/image/qa4uto9gd/（我的作品快照）
基本上，这里用红色绘制的图是我想在 BFS/DFS 期间应用转换的图，有点类似于 http://visualgo.net/dfsbfs.html 现在减去边缘转换。
我正在使用HTML5 canvas画图，其中每个节点用一个圆圈表示，每条边都是一个箭头。我有一个数组，用于存储每个 node/circle 的 X 和 Y 坐标。但是，我想在我的图表上显示 BFS/DFS 效果的可视化表示，即当 BFS 处于 运行、
时
- 接受审查的节点转变为某种颜色（比如蓝绿色）
- 然后邻域节点会过渡到某种颜色（再说一次蓝绿色）
- 然后，最初受到审查的节点会经历颜色过渡到某种较深的颜色（比如较深的蓝绿色），以表明其对邻居的扫描已完成。
上述变色算法与算法导论，第三版，Thomas H. Cormen 中给出的算法有些相似
我不知何故被困在动画部分的实现中。谁能建议我如何使用 jQuery 执行这些转换？
您无法使用 jQuery 为 canvas 上的输出设置动画，因为内容不是 DOM 节点。 jQuery 与 DOM 节点（元素）及其动画属性一起使用，因此与 canvas 本身（宽度、高度等）一起使用 - 为 canvas 本身设置动画非常棘手并在其中保持输出的纵横比，但下次再讨论）。您给出的示例使用 SVG（DOM 个节点），因此可以通过 jQuery 操作它们。您需要普通的旧 javascript 来为 "nodes" 您的 canvas 输出着色。看看 fiddle ,把它拆开并根据需要应用。
问题似乎重复：Continuous Color Transition
我目前正在开发一个网络应用程序，它以邻接列表格式输入用户的图形，并在此基础上执行各种算法，例如 Djisktra 算法、Bellman Ford、BFS、DFS 等。我面临的唯一问题是图表上的动画。
http://postimg.org/image/qa4uto9gd/（我的作品快照）
基本上，这里用红色绘制的图是我想在 BFS/DFS 期间应用转换的图，有点类似于 http://visualgo.net/dfsbfs.html 现在减去边缘转换。
我正在使用HTML5 canvas画图，其中每个节点用一个圆圈表示，每条边都是一个箭头。我有一个数组，用于存储每个 node/circle 的 X 和 Y 坐标。但是，我想在我的图表上显示 BFS/DFS 效果的可视化表示，即当 BFS 处于 运行、
时- 接受审查的节点转变为某种颜色（比如蓝绿色）
- 然后邻域节点会过渡到某种颜色（再说一次蓝绿色）
- 然后，最初受到审查的节点会经历颜色过渡到某种较深的颜色（比如较深的蓝绿色），以表明其对邻居的扫描已完成。
上述变色算法与算法导论，第三版，Thomas H. Cormen 中给出的算法有些相似 我不知何故被困在动画部分的实现中。谁能建议我如何使用 jQuery 执行这些转换？
您无法使用 jQuery 为 canvas 上的输出设置动画，因为内容不是 DOM 节点。 jQuery 与 DOM 节点（元素）及其动画属性一起使用，因此与 canvas 本身（宽度、高度等）一起使用 - 为 canvas 本身设置动画非常棘手并在其中保持输出的纵横比，但下次再讨论）。您给出的示例使用 SVG（DOM 个节点），因此可以通过 jQuery 操作它们。您需要普通的旧 javascript 来为 "nodes" 您的 canvas 输出着色。看看 fiddle ,把它拆开并根据需要应用。
问题似乎重复：Continuous Color Transition