如何使用HTML5 Canvas动态的绘制拓扑图

html-css010

如何使用HTML5 Canvas动态的绘制拓扑图,第1张

具体想要什么样的效果,简单的点击生成线和节点很简单,调用rect,lineto,arc就能完成;如果要在生成的框内加文字就需要text方法,点击生成时将rect的起始点存在一个数组里;

然后最好在外面设置一个input框,然后每次生成之后,需要input输入节点的内容,

最后设置一个右键事件表示事件结束。置于焦点和交点处逻辑也要考虑到。

动态的绘制拓扑图1.添加引用\r\n右击项目-添加引用-浏览找到本地的dll文件\r\n2.using该dll文件里面代码的名称空间\r\n然后就可以调用dll文件里面的类和方法定义和用法:Canvas对象表示一个HTML画布元素-。它没有自己的行为,但是定义了一个API支持脚本化客户端绘图操作。你可以直接在该对象上指定宽度和高度,但是,其大多数功能都可以通过CanvasRenderingContext2D对象获得。这是通过Canvas对象的getContext()方法并且把直接量字符串"2d"作为唯一的参数传递给它而获得的。标记在Safari1.3中引入,在制作此参考页时,它在Firefox1.5和Opera9中也得到了支持。在IE中,标记及其API可以使用位于excanvas点sourceforge点net的ExplorerCanvas开源项目来模拟。提示:如果希望学习如何使用来绘制图形,可以访问Mozilla提供的Canvas教程(英文)以及相应的中文Canvas教程。使用标记绘图大多数Canvas绘图API都没有定义在元素本身上,而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。CanvasAPI也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用beginPath()和arc()方法。一旦定义了路径,其他的方法,如fill(),都是对此路径操作。绘图环境的各种属性,比如fillStyle,说明了这些操作如何使用。注释:CanvasAPI非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个图形,必须要么自己绘制它再用位图图像合并它,或者在上方使用CSS定位来覆盖HTML文本。Canvas对象的属性height属性画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是300。width属性画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是300。