如何通过直线绘制文本以及如何使用Html Canvas突出显示鼠标输入的文本。请帮我

Question

我可以按照方向绘制一条线但是我无法按行方向绘制文本。我的油漆会是这样的......

Answer 1

您需要弄清楚文本的宽度，并且可以通过以下方式解决：

ctx.measureText(text).width;

然后创建一个在其两侧（和箭头）绘制线条的功能。在绘制之前旋转整个画布完成所有操作，如下所示：

原始答案：http://jsfiddle.net/txrvLLjp

修改 新代码允许添加起点和终点。

＆＃13;

＆＃13;

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

var text = "Knows";
var TO_RADIANS = Math.PI / 180;
ctx.font = "12px Arial";

drawArrow(text,40,40,200,200);

function drawArrow(text,startX,startY,stopX,stopY) {
    var deltaX = (stopX-startX);
    var deltaY = (stopY-startY)
    
    //calculating the total length of the line
    var arrowLength=Math.sqrt(deltaX*deltaX+deltaY*deltaY);
    //calculating the angle
    var angle=Math.atan2(deltaY,deltaX) * 180 / Math.PI;
    
    ctx.save();
    ctx.translate(startX,startY);
    ctx.rotate(angle*TO_RADIANS);
    var textLength = ctx.measureText(text).width;
    var padding=(arrowLength-textLength)/2;
    ctx.moveTo(0,0);
    ctx.lineTo(padding,0);
    ctx.stroke();
    ctx.fillText(text,padding,4);
    ctx.moveTo(padding+textLength,0);
    ctx.lineTo(padding+textLength+padding,0);
    ctx.stroke();
    
    //Arrow point below
    ctx.moveTo(padding+textLength+padding,0);
    ctx.lineTo(padding+textLength+padding-8,8);
    ctx.stroke();
    ctx.moveTo(padding+textLength+padding,0);
    ctx.lineTo(padding+textLength+padding-8,-8);
    ctx.stroke();
    ctx.restore();
    
}

＆＃13;

<canvas id="myCanvas" width="200" height="400"></canvas>

＆＃13;

＆＃13;

＆＃13;