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

2019-09-17 23:35:43 阅读：244 来源： 互联网

我正在绘制一个需要在完全可用屏幕(100％宽度和高度)上的画布.我使用这样的javascript设置画布的宽度和高度

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

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

谢谢您的帮助.

解决方法:

挑战

由于canvas’measureText目前不支持测量高度(上升下降),我们需要做一些DOM技巧来获得行高.

由于字体(或字体)的实际高度不一定(很少)与字体大小相对应,因此我们需要更准确的方法来测量它.

解

Fiddle demo

结果将是一个垂直对齐的文本,它总是适合画布的宽度.

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

第一个函数是将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％)和样式(即粗体,斜体等)：

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

标签：javascript,canvas,max,font-size
来源： https://codeday.me/bug/20190917/1810204.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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