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

我可以按照方向画一条线，但我不能按照线的方向画文本。我的画会是这样的

---

您需要计算文本的宽度，这可以通过以下方法解决：

ctx.measureText(text).width;

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

原始答复：

编辑 新代码允许添加起始点和停止点

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var text=“知道”；
var TO_弧度=Math.PI/180；
ctx.font=“12px Arial”；
drawArrow（文本，40,40200200）；
函数绘图箭头（文本、startX、startY、stopX、stopY）{
var deltaX=（stopX startX）；
var deltaY=（stopY startY）
//计算线的总长度
变量arrowLength=Math.sqrt（deltaX*deltaX+deltaY*deltaY）；
//计算角度
变量角度=数学atan2（deltaY，deltaX）*180/Math.PI；
ctx.save（）；
ctx.翻译（startX、startY）；
ctx.旋转（角度*至弧度）；
var textLength=ctx.measureText（text）.width；
变量填充=（arrowLength textLength）/2；
ctx.moveTo（0,0）；
ctx.lineTo（填充，0）；
ctx.stroke（）；
ctx.fillText（文本，填充，4）；
ctx.moveTo（填充+文本长度，0）；
ctx.lineTo（padding+textLength+padding，0）；
ctx.stroke（）；
//下面的箭头
ctx.moveTo（padding+textLength+padding，0）；
ctx.lineTo（填充+文本长度+填充-8,8）；
ctx.stroke（）；
ctx.moveTo（padding+textLength+padding，0）；
ctx.lineTo（padding+textLength+padding-8，-8）；
ctx.stroke（）；
ctx.restore（）；
}

---

实际上，直线方向可能会改变（移动直线），因此角度将根据方向计算。我想知道是否有任何jquery函数或库可以在一行上写入文本。我将提供开始和结束顶点（坐标位置）和文字，它绘制的都根据我的要求。提前感谢…我稍微修改了代码，允许输入文本、起点和停止点。该函数处理其余部分。不幸的是，我不知道有任何jquery函数可以做到这一点，所以我尝试创建自己的；）没问题……您已经解决了坐标问题……请尝试使用drawArrow（文本，40,40200,40）；它应该是水平画的，但它是垂直画的。很抱歉，现在已经纠正了。我在

Math.atan2（deltaY，deltaX）

中混合了x坐标和y坐标。我更新了上面的答案，但这里也有一个可用的提琴：