`
Aaronlong31
  • 浏览: 5402 次
  • 性别: 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
分享到:
评论

相关推荐

    ec-canvas 实现echart图表显示

    ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...

    原生JS使用Canvas实现拖拽式绘图功能

    原生JS使用Canvas实现拖拽式绘图功能的知识点涵盖了Canvas API的基础应用、面向对象编程思想在Canvas绘图中的运用以及鼠标事件的处理,以下是详细解析: 1. Canvas API基础知识 - Canvas元素:HTML5新增的Canvas...

    canvas实现模糊效果

    在本主题中,我们将深入探讨如何使用CSS3和Canvas来实现图片的模糊效果,特别是在Canvas上进行交互设计时如何应用模糊特效。 首先,CSS3已经提供了`filter`属性来实现元素的模糊效果。通过`filter: blur(x)`,我们...

    使用JavaScript+canvas实现图片裁剪

    canvas是一个可以让我们使用脚本绘图的标签,它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制,图像处理甚至实现简单的动画和游戏制作。 canvas标签只有两个属性:width和height,用来设定画布的宽和高...

    canvas实现涂鸦效果

    "canvas实现涂鸦效果"这个主题涉及到的是如何利用Canvas API来创建一个具有涂鸦功能的画板应用。下面将详细讲解实现这一功能所涉及的关键知识点。 1. **Canvas API基础**: - `canvas`元素:HTML5中的`<canvas>`...

    基于three.js + canvas实现爱心代码+播放器效果.zip

    基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于...

    Canvas梦幻大树生长动画特效.zip

    【Canvas梦幻大树生长动画特效】是一种使用JavaScript编程语言和HTML5 Canvas元素实现的视觉效果。在Web开发中,Canvas是一个非常重要的组成部分,它允许开发者在网页上进行动态图形绘制,从而创造出各种各样的动画...

    j2me中用canvas实现的目录树代码

    在Java 2 Micro Edition (J2ME) ...总之,使用J2ME的Canvas实现目录树需要理解数据结构、图形绘制和事件处理,同时也需要考虑性能和用户体验。这个过程可以锻炼你的编程技巧,提高你在嵌入式系统开发领域的专业能力。

    HTML5_canvas绘制动态树视图 类似结构图.rar

    这个"HTML5_canvas绘制动态树视图 类似结构图.rar"压缩包包含了一个利用Canvas实现的动态树形视图示例,它能帮助我们理解如何用HTML5的Canvas API构建交互式的数据可视化应用。 在Canvas上绘制动态树视图,首先需要...

    CANVAS实现鼠标绘制矩形框

    基于canvas的鼠标绘制矩形框的demo,多个canvas对象下支持选中,平移,删除操作,代码用VUE实现的

    html5结合Canvas实现的树叶飘落动画特效源码.zip

    这就是使用HTML5 Canvas实现树叶飘落动画的基本步骤。通过调整参数,如树叶的数量、速度、颜色,以及重力效果,你可以创造出不同风格的动画特效。此外,还可以结合其他HTML5特性,如Web Audio API添加音效,或者使用...

    Canvas实现文字云(标签云)效果,多浏览器支持

    在本文中,我们将深入探讨如何使用HTML5的Canvas API实现一个跨浏览器的文字云(标签云)效果,特别关注对IE9及更高版本的支持。Canvas是HTML5中的一个强大的绘图工具,允许开发者直接在网页上进行图形绘制。下面,...

    微信小程序基于canvas实现纯色背景抠图功能

    微信小程序基于canvas实现纯色背景抠图功能,值得一看和学习;微信小程序基于canvas实现纯色背景抠图功能,值得一看和学习;微信小程序基于canvas实现纯色背景抠图功能,值得一看和学习;微信小程序基于canvas实现...

    使用canvas实现图片马赛克

    以下我们将详细讲解如何使用canvas和JavaScript来实现这一功能。 首先,我们需要创建一个canvas元素,并将待处理的图片加载到canvas的上下文环境中。在JavaScript中,我们可以使用`<canvas>`的`getContext()`方法...

    微信小程序canvas实现文字缩放

    综上所述,实现微信小程序canvas的文字缩放主要涉及`setFontSize`方法的使用以及事件监听来动态调整字体大小。通过熟练掌握canvas API,开发者可以在微信小程序中构建出各种炫酷的图形和动画效果,提升用户体验。

    用HTML5canvas绘制动态圣诞树:技巧与代码

    通过使用HTML5的<canvas>元素和JavaScript,我们可以在网页上绘制出充满节日气氛的圣诞树,并为其添加动态效果。这不仅能够提升用户的互动体验,还能展示我们的编程技能。随着圣诞节的临近,不妨尝试自己动手制作一...

    微信小程序源码 小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221)(学习版)

    微信小程序源码 小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221)(学习版)微信小程序源码 小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221)(学习版)微信小程序源码 小程序完整demo:飞翔的...

    canvas动态画出视图树

    本文将深入探讨如何使用Canvas来实现这一功能,并涉及与动态添加、删除视图树节点相关的技术。 首先,我们需要理解Canvas的基本绘图操作。Canvas 提供了一系列的绘图方法,如 `fillRect`(填充矩形)、`strokeRect`...

    Canvas实现的List

    本主题聚焦于如何利用Canvas实现一个List,这个List可以包含字符串、图片等多种元素,使得用户界面更加丰富且交互性强。 首先,我们来看CList.java这个文件,它很可能包含了Canvas List的实现代码。在Java中,我们...

    canvas实现js、html连线

    在canvas上绘制线条,我们使用`beginPath()`开始一条新路径,`moveTo()`移动到起点,`lineTo()`定义直线到终点,最后用`stroke()`绘制出来: ```javascript ctx.beginPath(); ctx.moveTo(startX, startY); ctx.line...

Global site tag (gtag.js) - Google Analytics