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

 我来答
5艾辰
2016-02-27 · 超过51用户采纳过TA的回答
知道小有建树答主
回答量:93
采纳率:100%
帮助的人:73.4万
展开全部
  • <canvas>动态的绘制拓扑图

    1.添加引用\r\n右击项目-添加引用-浏览 找到本地的dll文件\r\n2.using 该dll文件里面代码的名称空间 \r\n然后就可以调用dll文件里面的类和方法

  • <canvas>定义和用法:

  Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作。

  你可以直接在该对象上指定宽度和高度,但是,其大多数功能都可以通过CanvasRenderingContext2D 对象获得。 这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。

  <canvas> 标记在 Safari 1.3 中引入,在制作此参考页时,它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中,<canvas> 标记及其 API 可以使用位于excanvas点sourceforge点net的 ExplorerCanvas 开源项目来模拟。

  提示:如果希望学习如何使用 <canvas> 来绘制图形,可以访问 Mozilla 提供的Canvas 教程(英文)以及相应的中文 Canvas 教程。

  • 使用 <canvas> 标记绘图

  大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的getContext() 方法获得的一个“绘图环境”对象上。

  Canvas API 也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用 beginPath() 和 arc() 方法。

  一旦定义了路径,其他的方法,如 fill(),都是对此路径操作。绘图环境的各种属性,比如 fillStyle,说明了这些操作如何使用。

  注释:Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas> 图形,必须要么自己绘制它再用位图图像合并它,或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。

  • Canvas 对象的属性

  height 属性

  画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

  width 属性

  画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

北京伟景智能科技
2024-11-23 广告
针对3D视觉无序抓取,北京伟景智能科技有限公司推荐采用基于深度学习和3D相机的解决方案,如AccuPick 3D等成熟方案。这些方案能够快速辨识不同工件在三维空间的位置与姿态,并精准引导机械手臂进行取放,有效提升生产效率。同时,这些方案还具... 点击进入详情页
本回答由北京伟景智能科技提供
专汽之家
2016-01-26 · 超过23用户采纳过TA的回答
知道答主
回答量:57
采纳率:0%
帮助的人:15.1万
展开全部
网络拓扑图,这种复杂的东西,自己写肯定没戏。不过现在大多基于html5有开源的包;
比如说jTopo工具包:http://www.open-open.com/lib/view/open1380205212914.html
Graph.Editor开源包:http://segmentfault.com/a/1190000002493968
twaver做的拓扑流程图:http://servasoft.com/ui%E5%BC%80%E5%8F%91/twaver-animation.html
演示地址:http://demo.qunee.com/editor/(看样子还不错)
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
咕咕鸡不恰葱
2016-02-04 · 超过49用户采纳过TA的回答
知道小有建树答主
回答量:177
采纳率:65%
帮助的人:59.4万
展开全部
借鉴下这篇文章。
http://my.oschina.net/blogshi/blog/221749?p={{totalPage}}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
浪里个浪丫丫
2016-02-16 · 超过10用户采纳过TA的回答
知道答主
回答量:41
采纳率:0%
帮助的人:18.8万
展开全部
利用lineTo,和drawImage结合
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式