javascript - HTML Canvas 的measureText 还很遥远

Question

我试图在 HTML Canvas 上的字符串下画一条线，但从measureText返回的值是错误的。

代码如下:

var theCanvas =  document.querySelector('canvas')
var ctx = theCanvas.getContext("2d");
if (ctx) {
    var theString = "Drawing Text on a Canvas";
    ctx.font = "28px Verdana"
    ctx.fillText(theString, 20, 160);
    var textW = ctx.measureText(theString);
    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.moveTo(20, 170);
    ctx.lineTo(Math.round(textW.width), 170);
    ctx.stroke();
}

<canvas width="600" height="200"></canvas>

该行没有一直到达字符串的末尾。

Answer 1

当您设置线的端点时，您忘记考虑偏移量。您的文本从 x = 20 开始，然后应在计算出的端点 + 20 处结束

而不是 (x,y) = Math.round(textW.width), 170，那么它应该是 (x,y) = Math.round(textW.width) + 20, 170