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

我正在绘制需要在完整可用的屏幕上（100％宽度和高度）的canvas。 我用这样的javascript设置canvas的宽度和高度

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

设置完canvas后，我需要在其中绘制一些需要获得最大可用字体大小的文本。 请帮我find如何显示最大字体的文字。 文本可能包含单个字符（大写和小写）或string，也可能包含数字。 我需要用javascript而不是jQuery来做。

感谢您的帮助。

Answer 1

挑战

因为measureText目前不支持测量高度（上升+下降），所以我们需要做一些小技巧来获得行高。

由于字体或字体的实际高度不一定（很less）与字体大小相对应，所以我们需要更准确的方式来测量它。

解

小提琴演示

结果将是一个垂直alignment的文本，它总是适合宽度的canvas。

该解决scheme将自动获得字体的最佳尺寸。

第一个function是包装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]; } 

现在我们可以循环寻找最佳的大小（这里不是非常优化的，但是为了这个目的而工作 – 我刚刚写了这个，所以可能会有bug，一个是如果文本只是一个不超过宽度的字符之前的高度）。

这个函数至less有两个参数，上下文和文本，其他是可选的，如字体名称（仅限名称），公差[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]; } 

Answer 2

尝试这个。

FIDDLE DEMO

 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2 - 10; var text = 'IM @ CENTER!'; context.font = '10pt Calibri'; //try changing values 10,15,20 context.textAlign = 'center'; context.fillStyle = 'red'; context.fillText(text, x, y); 

您可以根据窗口大小提供您的条件。创build一个简单的function，如下所示：

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