Question

我试图在HTML Canvas上的字符串下方绘制一条线，而来自measureText的值是错误的。

代码如下：

public async Task<User> GetManager()
{
    GraphServiceClient graphClient = null;
    User manager = null;

    try
    {
        graphClient = GetAuthenticatedClient();
        manager = await graphClient.Me.Manager.Request().GetAsync() as User;
    }
    catch (Exception e)
    {
        string message = e.Message;
    }

    return manager;
}

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

该行并没有一直到字符串的结尾。

Answer 1

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

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

HTML Canvas measureText出现了

1 个答案: