HTML5第三弹：亦酷亦萌的网络拓扑图

本文链接：https://blog.csdn.net/twaver/article/details/46916431

本文介绍了使用HTML5的canvas技术创建网络拓扑图的方法，通过色彩渐变、折角和小细节提升图形清晰度和美观性。文章详细讲述了如何运用颜色层次、折角效果以及添加小元素如回形针来增强拓扑图的立体感和可读性，旨在在实际业务中实现技术与艺术的结合。

摘要由CSDN通过智能技术生成

前言

前一篇3D机房好像有点火，看来轻量的Web 3D是大势所趋，当时选择WebGL而不是U3D真是灰常英明的抉择。

3D虽然炫酷，但在真正的企业应用里，数据、关系的呈现还是要回到传统2D界面，而HTML5是目前的最佳选择。像HTML5的canvas，虽然已经不是什么新鲜技术了，但直接在浏览器中绘制网络拓扑图的逻辑关系，而不需要安装任何插件，对于很多正在更新换代的OSS系统来说，还是很有吸引力的。

最近忙着给客户折腾一个复杂的多层嵌套关系，最后的成果还是比较有成就感的。

这里写图片描述

需求描述

先简单描述下这次客户的需求。

现实应用中，网络拓扑图结构可能很简单，也可能非常复杂。

比如这种节点较多的单层拓扑：

这里写图片描述

稍复杂一些的：

这里写图片描述

在这些拓扑图中常见的场景是，很多网络节点需要组成一组，这常被称为“网元组”。一般来说，网元组会有一个形状，双击可以展开/闭合。如下图：

这里写图片描述

这次客户的需求中，最大的难点就是需要有五层网元组的嵌套，五层同时展开时，要求清晰美观。常规的分组形状有圆形、矩形、平行四边形等，无论哪种形状，分组多了后，就会产生审美疲劳。比如，我让设计师mm简单地把五层嵌套画个图，它看起来会是这样：

这里写图片描述

我把这个图给客户看了以后，客户表示希望“结构能够更加清晰”。那天，魔都大雨倾盆，我抓耳挠腮一个下午，终于有了一些灵感。

颜色

怎样才能使得结构效果更加清晰？我想到的是用颜色。颜色永远是图形设计里面的第一要素。如果分组颜色千篇一律，自然就看不太清楚包含关系。但是颜色太多五颜六色，显然也不符合电信UI系统的风格。那颜色要如何设置呢？层层嵌套的分组，层层……叮！你有没有想到一种蔬菜？
这里写图片描述

（此处哼唱“如果你可以一层一层一层地剥开我的心……”一百遍……）

这颗大洋葱看上去层次分明，是因为它的颜色从内到外有一定规律的变化：渐变。说到渐变，又想起最近GF推荐的一枚游戏，大概内容是按照颜色的渐变规律来排列一些方块。（很无聊有没有？）

这里写图片描述

不过，前端设计中，配色倒是很重要的一个环节。

总之，想好了用渐变的配色来使嵌套组更清晰后，就大胆地尝试一下：

var group = new twaver.Group();
group.setStyle('group.fill.color', style[3]);
group.setStyle('group.deep', 0);
group.setStyle('group.outline.width', style[1]);
group<