使用Javascript获得画布中的最大字体大小

我画的画布，需要在全屏幕上可用（100%的宽度和高度）。我使用javascript设置画布的宽度和高度，如下所示

  var w = window.innerWidth;
  var h = window.innerHeight;
  var canvas = document.getElementById("myCanvas");
  canvas.width  = w;
  canvas.height = h;

设置画布后，我需要在其中绘制一些文本，以获得最大可用字体大小。请帮助我找到如何以最大字体显示文本的方法。文本可以包含单个字符（大写和小写）或字符串，也可以包含数字。我需要用javascript而不是jquery来完成

谢谢你的帮助。

试试这个

您可以根据窗口大小提供条件。创建如下简单函数：

function Manipulate_FONT(window.widht, window.height) {
    if (window.widht == something && window.height == something) {
        font_size = xyz //put this in ---> context.font = '10pt Calibri'
    }
}

挑战 由于canvas'

measureText

目前不支持测量高度（上升+下降），我们需要做一些DOM技巧来获得线高度

由于字体或字体的实际高度不一定（很少）与字体大小相符，我们需要一种更精确的测量方法

解决方案

结果将是垂直对齐的文本，其宽度始终适合画布

此解决方案将自动获得字体的最佳大小

第一个功能是包装

measureText

以支持高度。如果文本度量的新实现不可用，则使用DOM：

function textMetrics(ctx, txt) {

    var tm = ctx.measureText(txt),
        w = tm.width,
        h, el;  // height, div element
    
    if (typeof tm.fontBoundingBoxAscent === "undefined") {
    
        // create a div element and get height from that
        el = document.createElement('div');
        el.style.cssText = "position:fixed;font:" + ctx.font +
                           ";padding:0;margin:0;left:-9999px;top:-9999px";
        el.innerHTML = txt;

        document.body.appendChild(el); 
        h = parseInt(getComputedStyle(el).getPropertyValue('height'), 10);
        document.body.removeChild(el);

    } 
    else {
        // in the future ...
        h = tm.fontBoundingBoxAscent + tm.fontBoundingBoxDescent;
    }

    return [w, h];
}

现在我们可以循环找到最佳大小（这里不是很优化，但可以达到这个目的——我刚刚写了这个，所以里面可能有错误，一个是如果文本只是一个字符，不超过高度之前的宽度）

此函数至少有两个参数，上下文和文本，其他参数是可选的，如字体名称（仅名称）、公差[0.0,1.0]（默认值为0.02或2%）和样式（即粗体、斜体等）：

函数getOptimalSize（ctx、txt、fontName、公差、公差、样式）{ 公差=（公差==未定义）？0.02：公差； fontName=（fontName==未定义）？“无衬线”：fontName； 样式=（样式===未定义）？“”：样式+“”； var w=ctx.canvas.width， h=ctx.canvas.height， 电流=h， i=0， 最大值=100， tm， wl=w-w*公差*0.5， wu=w+w*公差*0.5， hl=h-h*公差*0.5， hu=h+h*公差*0.5； 对于（；i=wl&&tm[0]当前值）{ 电流*=（1-公差）； }否则{ 电流*=（1+公差）； } } 返回[-1，-1]； }

---

您可以使用measureText（）参考这个答案你想根据你的窗口大小优化你的字体大小吗？这就是你所说的吗？是的，完全是弥赛亚。我想根据窗口大小和字符串长度优化画布中的字体大小。朱迪亚拉苏，感谢你共享的链接。我已经实现了它，我面临的唯一问题是文本无法获取垂直居中对齐。问题“如何获得最大可用字体大小”的答案在哪里？这只是演示如何绘制居中对齐但仅使用静态值的文本。

function textMetrics(ctx, txt) {

    var tm = ctx.measureText(txt),
        w = tm.width,
        h, el;  // height, div element
    
    if (typeof tm.fontBoundingBoxAscent === "undefined") {
    
        // create a div element and get height from that
        el = document.createElement('div');
        el.style.cssText = "position:fixed;font:" + ctx.font +
                           ";padding:0;margin:0;left:-9999px;top:-9999px";
        el.innerHTML = txt;

        document.body.appendChild(el); 
        h = parseInt(getComputedStyle(el).getPropertyValue('height'), 10);
        document.body.removeChild(el);

    } 
    else {
        // in the future ...
        h = tm.fontBoundingBoxAscent + tm.fontBoundingBoxDescent;
    }

    return [w, h];
}

function getOptimalSize(ctx, txt, fontName, tolerance, tolerance, style) {

    tolerance = (tolerance === undefined) ? 0.02 : tolerance;
    fontName = (fontName === undefined) ? 'sans-serif' : fontName;
    style = (style === undefined) ? '' : style + ' ';
    
    var w = ctx.canvas.width,
        h = ctx.canvas.height,
        current = h,
        i = 0,
        max = 100,
        tm,
        wl = w - w * tolerance * 0.5,
        wu = w + w * tolerance * 0.5,
        hl = h - h * tolerance * 0.5,
        hu = h + h * tolerance * 0.5;
    
    for(; i < max; i++) {

        ctx.font = style + current + 'px ' + fontName;
        tm = textMetrics(ctx, txt);
        
        if ((tm[0] >= wl && tm[0] <= wu)) {
            return tm;
        }
        
        if (tm[1] > current) {
            current *= (1 - tolerance);
        } else {
            current *= (1 + tolerance);
        }            
    }
    return [-1, -1];
}