`
Aaronlong31
  • 浏览: 5503 次
  • 性别: Icon_minigender_1
  • 来自: 仙桃
最近访客 更多访客>>
社区版块
存档分类
最新评论

用canvas实现的红黑树

阅读更多
之前我写了个js版的图形化显示排序,反响和效果还不错。(http://www.zlong.org/js-practice/imgswap.html
我一个同事看见了,就要我弄个红黑树的,他提供树的节点数据,我负责在页面上展示。
我搜到canvas可以用画图,看了看,然后就琢磨用这东西画树了,最开始就是画圆和线,然后画二叉树。我的第一个版本的红黑树效果如图1,但高度比较高但没有子节点的相邻节点之间的距离太大,所以图看着很别扭。最后和同事探讨了一下算法,总算弄的好看了,效果如图2。页面地址:http://www.zlong.org/js-practice/red_black_tree.html(只能用chrome/firefox/opera/safari/IE9看)。

  • 大小: 222 KB
  • 大小: 98.7 KB
分享到:
评论

相关推荐

    原生CSS+JS实现数据结构动态展示如二叉树,红黑树等

    本文将详细探讨如何使用原生CSS和JavaScript来实现二叉树、红黑树等复杂数据结构的动态展示。 首先,二叉树作为基础的数据结构,其动态展示相对简单。二叉树的每个节点通常包含数据部分以及两个指向其子节点的引用...

    browser-search-algo-viz:玩浏览器canvas API

    7. **红黑树**:另一种自平衡二叉搜索树,保持平衡的同时确保操作效率。 8. **图的深度优先搜索(DFS)** 和 **广度优先搜索(BFS)**:在图结构中寻找路径。 通过浏览器搜索算法可视化,学习者可以看到每一步的...

    ds-algo-visualizations:基于 HTML5 画布的常见数据结构和算法的可视化

    3. **红黑树**:红黑树是一种自平衡的二叉查找树,每个节点都带有颜色属性(红色或黑色)。通过特定的着色规则,红黑树保证了任何节点到其每个叶子节点的所有路径都包含相同数量的黑色节点,从而保持了树的高度平衡...

    JavaScript_从代码中可视化算法的交互式在线平台.zip

    1. **数据结构**:数组、链表、栈、队列、树(二叉树、AVL树、红黑树等)、图等是算法的基础。了解这些数据结构的特性和操作方法是实现可视化的关键。 2. **算法**:包括排序算法(冒泡排序、插入排序、选择排序、...

    android中国象棋源码--经典

    在这个项目中,开发者可能使用了自定义View来绘制棋盘和棋子,通过Canvas进行图形绘制,同时实现拖放操作。触摸事件的监听和处理是实现棋子移动功能的核心,需要精确地识别用户的滑动和点击动作。 为了增加游戏趣味...

    HTML5中国象棋游戏(人机对弈网页版)

    例如,可以使用渐变、阴影、边框圆角等特性增强棋盘和棋子的视觉效果,同时通过媒体查询实现响应式设计,适应不同设备屏幕。 四、服务器端技术 虽然描述中没有明确提及,但为了将源码部署到虚拟空间并让玩家在线...

    JDK_API_1_6_zh_CN.zip

    HashMap和TreeMap则对应Map接口,前者基于哈希表,后者基于红黑树,保证了快速查找和排序。 三、多线程 Java 1.6在多线程方面提供了Thread类和Runnable接口,使得并发编程成为可能。线程的创建、启动、同步和终止都...

Global site tag (gtag.js) - Google Analytics