Question

大家好我已经无情地尝试编写一个脚本来检查字符串的宽度，如果它大于一定数量，请降低字体大小并再次绘制它。除非这不起作用。一旦我最初绘制文本，它永远不会更新到正确的字体大小。它只是保持它原来的状态，并且永远不会变得更小，将脚本抛入无限循环。这是我的代码：

var nFontSize = 25;

var draw_name = function(text) {
    var c=document.getElementById("badgeCanvas");
    var ctx=c.getContext("2d");
    ctx.font="nFontSize OpenSansBold";
    ctx.fillStyle = "#000000";
    ctx.fillText(text,80,25);
    var metrics = ctx.measureText(text);
    var width = metrics.width;

    while (width > 200) {
        nFontSize--;
        ctx.font="nFontSize OpenSansBold";
        ctx.fillText(text,80,25);
        metrics = ctx.measureText(text);
        width = metrics.width;
    }

    ctx.font="nFontSize OpenSansBold";
    ctx.fillStyle = "#000000";
    ctx.fillText(text,80,25);

Answer 1

“nFontSize OpenSansBold”不是有效字体。尝试

ctx.font= nFontSize + "px OpenSansBold";

此外，您无需渲染它来测量文本，因此请在while循环之前和while循环内删除ctx.fillText(text,80,25);。否则，它看起来会很难看。

var nFontSize = 25;

var draw_name = function(text) {
    var c=document.getElementById("badgeCanvas");
    var ctx=c.getContext("2d");
    ctx.font= nFontSize + "px OpenSansBold";
    ctx.fillStyle = "#000000";

    var metrics = ctx.measureText(text);
    var width = metrics.width;

    while (width > 200) {
        nFontSize--;
        ctx.font= nFontSize + "px OpenSansBold";

        metrics = ctx.measureText(text);
        width = metrics.width;
    }

    ctx.font= nFontSize + "px OpenSansBold";
    ctx.fillStyle = "#000000";
    ctx.fillText(text,80,25);

在html画布中检查字符串的宽度

1 个答案: