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