在html页面中的2个元素之间绘制线条

我需要在html页面上的2个元素之间画线

结果应该是这样的： http ： //img2.timg.co.il/forums/1_173873919.JPG

我想知道最好的办法是什么

  1. 使用canvas和html5
  2. 使用背景图像。
  3. 由ajax动态制作图像

我想知道什么是最好的方式，如果网上有一个简单的演示

谢谢

有很多方法可以解决您的需求：

这是一个使用htmlcanvas的解决方案： http ： //jsfiddle.net/m1erickson/86f4C/

在此处输入图像描述

示例代码（可以使用jquery + css-classes完全自动化）： 

            
 
0
 
1
 
2
 
 
 
0
 
1
 
2

使用一些Javascript和HTML canvas标签有一种非常简单的方法可以实现这一点。

DEMO HERE展示了如何在你的例子中绘制最复杂的元素，其中有一个字段，其中的行分支到另外两个字段。

它（基本上）的工作原理如下。

启动绘图function： 

  context.beginPath();

将所需坐标传递给函数： 

  context.moveTo(100, 150); context.lineTo(450, 50);

然后执行绘图： 

  context.stroke();

这里有一些很棒的教程

使用如果你想使用简单的东西，如圆圈和图像和东西 – 对于div，你会想要寻找像Jquery或 – 像你说的那样 – javascript。 对于你可以尝试这个和这个

这里是一个gist的链接 ，它使用javascript（jquery）在任何2个html元素之间绘制路径（并在窗口大小调整的情况下重绘它）。

演示

Interesting Posts