Javascript 寻找两点之间的中间点

我有一堆HTML元素，我想通过画布与行连接。以下是我试图实现的目标的模型：

目前，我只有行，没有文本。我想把文本放在每行的中间，但由于它们是对角线，我不知道怎么做

当前代码：

// '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<connectors.length;i++){
    var wpoint = connectors[i];
    var pos1   = {w: wpoint, h: 0};
    var pos2   = {w: canvas.width / 2, h: canvas.height};
    ctx.beginPath();
    ctx.moveTo(pos1.w,pos1.h);
    ctx.lineTo(pos2.w,pos2.h);
    ctx.stroke();

    // Write Text Halfway 
    ctx.fillStyle = "blue";
    ctx.font = "bold 16px Arial";
    ctx.fillText("2702", 100, canvas.height / 2); 
    // No idea what to put as the x value here

}

/“连接器”是与
//每个蓝色大按钮的x值中间
clearRect（0,0，canvas.width，canvas.height）；
对于（var i=0；i

方法如下：


计算直线的中点
划清界限
删除其中点处的线
告诉画布以指定的[x，y]水平和垂直居中放置任何绘制的文本
在中点绘制文本

这里是注释代码和演示：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量线={x0:20，y0:20，x1:150，y1:150}；
文本在中线（行，'2702'，'verdana'，14）
函数文本中线（线、文本、字体面、字体大小）{
//保存未修改的上下文状态
ctx.save（）；
//计算线中点
var midX=直线.x0+（直线.x1直线.x0）*0.50；
var midY=线y0+（线y1线y0）*0.50；
//计算文本宽度
字体=fontsize+px+fontface；
var textwidth=ctx.measureText（text）.width；
//划清界限
ctx.beginPath（）；
ctx.moveTo（第x0行，第y0行）；
ctx.lineTo（第x1行，第y1行）；
ctx.线宽=2；
ctx.strokeStyle='lightgray'；
ctx.stroke（）；
//清除中点处的线
ctx.globalCompositeOperation='destination-out'；/“擦除”
ctx.fillRect（midX textwidth/2，midY fontsize/2，textwidth，fontsize*1.286）；
ctx.globalCompositeOperation='source-over'；//重置为默认值
//告诉画布在[x，y]周围水平和垂直居中放置文本
ctx.textAlign='center'；
ctx.textBaseline='middle'
//在中点绘制文本
ctx.fillText（text，midX，midY）；
//还原未修改的上下文状态
ctx.restore（）；
}
body{背景色：象牙；}
#画布{边框：1px纯红；边距：0自动；}
只是想知道，既然线条是有角度的，文本不会全部显示在同一水平面上，因为斜线的中间高度将不同于最窄线条的中间高度line@johnny5很好的一点-我认为解决方案是找到正确的
x值
，并将
y值
绘制到图像的一半画布的高度。画线可能更容易，在同一个y轴上的每一条线上找到一个点，然后删除类似的部分，然后在上面画出你的文字。是的，和你刚才画的差不多said@johnny5是的。我已经更新了问题/示例代码以反映这一点。但仍然不知道如何找到X值：）这是找到直线的中间点还是？我认为op希望它能计算出中间线的中间点，在所有坐标系中进行转换lines@johnny5它查找每个指定直线的中点。如果所有行都具有相同的
y0
和
y1
（如问题的示例图像中所示），则代码将在不修改的情况下工作。是的，如果要指定中间的
y
，则可以将所有图形钳制到该中间的y。如果您希望中间y位于垂直区域的中点，那么您可以对该垂直区域使用相同的
midX
&
midY
计算（使用x0=0&x1=0使定义线垂直）。这对我很有用！你可能会认为一些看似简单的东西在Javascript中会有一个简单的方法，不幸的是没有。如果你将向量从
P1
归一化到
P2
，得到
nx
，
ny
和行
length
，那么文本将需要一个等于
gap=Math.sqrt（textWidth*textWidth+textHeight*textHeight）的间隙
这是文本上方三角形的斜边，然后从
P1.x
，
P1.y
到
P1.x+nx*（length/2-gap/2）
和
P1.y+ny*（length/2-gap/2）
然后从
P1.x+nx*（length/2+gap/2）
和
P1.y+ny*（length/2+gap/2）
到
P2.x
，
P2.y
您可以避免清除文本区域，如果您有详细的background@Blindman67. 当然，为什么不呢？真的有很多解决方案。您还可以将您的
line+erase+fillText
放在一个单独的画布上，然后
drawImage
将暂存画布放在主画布上。