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

Question

我可以按方向画线，但不能按线方向画文字。我的画会是这样的...

Answer 1

您需要确定文本的宽度，可以通过以下方式解决：

ctx.measureText(text).width;

然后创建一个函数，在它的两边画线（和一个箭头）。在绘制之前通过旋转整个 canvas 来完成所有操作，如下所示：

原回答：http://jsfiddle.net/txrvLLjp

编辑新代码允许添加起点和终点。

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();
    
}

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

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

How to draw text through line and How to highlight the text on mouse enter using Html Canvas. Please help me

html

javascript

canvas