我有一堆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<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
}
实现这一目标的最佳方法是什么?可能画出一半的线,写下文字,然后画出其余部分?
编辑:也许更好的标题/问题是:如何找到HTML Canvas中两个任意点之间的中点?我想在那里画文字。
答案 0 :(得分:8)
以下是:
这是带注释的代码和演示:
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.strokeStyle='lightgray';
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; }
<canvas id="canvas" width=300 height=300></canvas>