javascript - 使用 Javascript 获取 Canvas 中的最大字体大小

Question

我正在绘制需要在整个可用屏幕(100% 宽度和高度)上的 Canvas 。我像这样使用 javascript 设置 Canvas 的宽度和高度

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

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

感谢您的帮助。

Answer 1

挑战

由于 Canvas 的 measureText 目前不支持测量高度(上升 + 下降)，我们需要做一些 DOM 技巧来获取行高。

由于字体(或字样)的实际高度不一定(很少)与字体大小相对应，我们需要一种更准确的测量方法。

解决方案

Fiddle demo

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

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

第一个功能是包裹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];
}

现在我们可以循环找到最佳大小(这里不是很优化，但可以达到目的 - 我刚刚写了这篇文章所以那里可能有错误，一个是如果文本只是一个字符而不是' t 在高度之前超过宽度)。

此函数至少需要两个参数，上下文和文本，其他参数是可选的，例如字体名称(仅名称)、公差 [0.0, 1.0](默认 0.02 或 2%)和样式(即粗体、斜体等) .):

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];
}