0

大家好，我一直在不懈地尝试编写一个脚本来检查字符串的宽度，如果它大于某个数量，则降低字体大小并再次绘制它。除了这不起作用。一旦我最初绘制文本，它就永远不会更新为正确的字体大小。它只是保持原来的样子，并且永远不会变得更小，从而使脚本陷入无限循环。这是我的代码：

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);
4

1 回答 1

1

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

ctx.font= nFontSize + "px OpenSansBold";

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

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);
于 2013-05-21T19:52:45.980 回答