兩個點或者兩div之間畫線

1.0 js庫：leader-line（推薦）

使用：傳入兩個元素即可以連線
先導入leader-line的庫文件
然後就可以直接使用了

//傳入元素a，b，就可以連線，option是配置參數，詳情參看leader-line介紹
new LeaderLine(a，b，{option}）

2.0 canvas繪製

window.onload = function () {
    var cav = document.getElementById('myCanvas'); //獲取canvas元素
    var ctx = cav.getContext('2d'); //獲取cav上下文，創建ctx對象，以獲取允許進行繪製的2d環境
    ctx.fillStyle = '#f60'; //顏色填充
    ctx.fillRect(0,0,100,100);
 
 
    //繪製直線
    /*beginPath()定義了一個新的路徑繪製動作的開始
     moveTo()爲指定點創建了一個新的子路徑，這個點就變成了新的上下文的點
     lineTo()以上下文點爲起點，到方法參數中指定的點之間畫一條直線。
     stroke()爲所畫的線賦予顏色，並使其可見，如果沒有特別指定的顏色的話，則默認使用黑色畫直線*/
    ctx.beginPath();
    ctx.moveTo(130,50);
    ctx.lineTo(200,50);
    ctx.lineWidth = 20; //線的寬度
    ctx.strokeStyle = '#ff0000'; //線的顏色
    ctx.lineCap='round'; //線的兩頭圓滑
    ctx.stroke();
 
    //繪製弧線和曲線
    /*arcTo()在畫布上創建介於兩個切線之間的弧/曲線
    quadraticCurveTo()繪製二次曲線，每條二次曲線要由上下文點、一個控制點和一個終止點來定義
    bezierCurveTo()繪製貝塞爾曲線，每條貝塞爾曲線要由上下文點、兩個控制點和一個終止點來確定。由於貝塞爾曲線
    有兩個控制點，因此比二次曲線更加的複雜多變*/
    //繪製弧線
    ctx.beginPath();
    ctx.moveTo(200,100);
    ctx.lineTo(300,100);
    ctx.arcTo(350,100,350,130,50);
    ctx.lineTo(350,170);
    ctx.stroke();
 
    //繪製二次貝塞爾曲線
    ctx.beginPath();
    ctx.moveTo(200,50);
    ctx.quadraticCurveTo(280,0,380,150);
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'blue';
    ctx.stroke();
 
    //繪製三次貝塞爾曲線
    ctx.beginPath();
    ctx.moveTo(400,100);
    ctx.bezierCurveTo(280,10,500,10,580,170);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#0ff';
    ctx.stroke();
 
    //複雜路徑
    ctx.beginPath();
    ctx.moveTo(120,30);
    //第一條直線
    ctx.lineTo(220,160);
    //二次曲線
    ctx.quadraticCurveTo(250,200,270,120);
    //貝爾塞爾曲線
    ctx.bezierCurveTo(300,-40,330,200,400,150);
    //第二條直線
    ctx.lineTo(500,90);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#333';
    ctx.stroke();
};

3.0 echarts繪製

/**
畫線用到的 API 爲 markLine 
data 即爲你要畫的點的集合
coord 即爲 點
coord[0] 和 coord[1] 代表了該 點 的位置座標
name 和 itemStyle 可以定製畫線的一些樣式
這只是一個示例代碼，更多東西還是要自己試一試
**/
series：{
    markLine: {
	   data: [
			[
				{
					name:'這是我畫的線',
					itemStyle:{
						normal:{
							show:true,
							color:'#4c5336'
						}
					},
					coord:[0,0]
				},
				{
					coord:[5,5]
				}
			],
		  ]
	},
}

3.0 svg繪製

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
   <path
      d="
      M40 100
      L40 250
      A20,20 0 0,0 60,270
      L180 270
      A20,20 0 0,1 200,290
      L200 360"
      fill="none"
      stroke-width="2"
      stroke-dasharray="15 8"
      stroke="blue"
      />
</svg>