找到两点之间的中间位置

我有一堆HTML元素,我想通过Canvas与行连接.这是我正在努力实现的模型:

目前,我只有线条,没有文字.我想在每一行之间放置文字,但看到它们是对角线,我不知道该怎么做.

当前代码:

// 'connectors' is an array of points corresponding to 
// the middle of each big blue buttons' x-value 

ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i

实现这一目标的最佳方法是什么？潜在地绘制一半的线,写文本,然后绘制剩余的线？

编辑:也许更好的标题/问题是:如何在HTML Canvas中找到两个任意点之间的中点？我想在那里画文字.


1> markE..：


这是如何做:


计算线的中点
划清界线
擦除其中点处的线条
告诉画布水平和垂直居中指定[x,y]周围的任何绘制文本
在中点绘制文本


这是带注释的代码和演示:



var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var line={x0:20,y0:20,x1:150,y1:150};

textAtMidLine(line,'2702','verdana',14)

function textAtMidLine(line,text,fontface,fontsize){

  // save the unmodified context state
  ctx.save();

  // calc line's midpoint
  var midX=line.x0+(line.x1-line.x0)*0.50;
  var midY=line.y0+(line.y1-line.y0)*0.50;

  // calc width of text
  ctx.font=fontsize+'px '+fontface;
  var textwidth=ctx.measureText(text).width;

  // draw the line
  ctx.beginPath();
  ctx.moveTo(line.x0,line.y0);
  ctx.lineTo(line.x1,line.y1);
  ctx.lineWidth=2;
  ctx.stroke;
  ctx.stroke();

  // clear the line at the midpoint
  ctx.globalCompositeOperation='destination-out'; // "erases" 
  ctx.fillRect(midX-textwidth/2,midY-fontsize/2,textwidth,fontsize*1.286);
  ctx.globalCompositeOperation='source-over';  // reset to default

  // tell canvas to horizontally & vertically center text around an [x,y]
  ctx.textAlign='center';
  ctx.textBaseline='middle'

  // draw text at the midpoint
  ctx.fillText(text,midX,midY);

  // restore the unmodified context state
  ctx.restore();

}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }