使用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來為畫布輸出的“節點”上色。 看起來小提琴 ,將其拆開並根據需要塗抹。

問題似乎重復出現： 連續顏色過渡