canvsjTopo

<canvs>是HTML5新增的，通常使用JavaScript在其中绘制图像的HTML元素。
<canvs>只有两个可选属性width、height(width的默认值为300px，height默认值为150px)。使用css设置宽高时，如果和初始比例不一致，会出现扭曲。
<canvs>会创建一个固定大小的画布，公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容，重点在2D渲染上下文。

var canvas = document.getElementById('canvas')
if(canvas.getContext){	//检测支持性
  var ctx = canvas.getContext('2d')	//获得2d上下文对象
}

在Canvas中绘制形状

- 绘制栅格和坐标空间；
- ``只支持一种原生图形 - - 矩形的绘制，所有其他图形至少需要生成一种`路径`，拥有众多路径生成的方法让复杂图形的绘制成为了可能，例如三角形、圆弧；
- 绘制图片
- 动画

---

---

[jTopo](http://www.jtopo.com/index.html)(JavaScript Topology library)是完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。
看jTopo的官方的API文档可知，jTopo有6个核心对象：
- Stage
- Stage（舞台）
- Scene（场景） - Node（节点）
- Link（连线）
- Container（容器）
- Effect.Animate（动画效果）
一般来说，jTopo的使用步骤：获取canvas-->创建stage-->创建scene添加的stage-->创建node添加到scene（其间包括对stage、scene、node的属性设置和API调用）

Link的样式

简单连线	Link
折线	FoldLink
二次折线	FlexionalLink
曲线	CurveLink

关于container，也就是分组容器，container需要添加到scene中，container中添加node。也即是说，相比于一般步骤中的“将node添加到scene”，在使用container容器时，需要将node添加到container以及scene中。