<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中。