Utilice Javascript para obtener el tamaño máximo de fuente en canvas

Estoy dibujando un canvas que debe estar en la pantalla completa disponible (100% de ancho y alto). Establecí el ancho y alto del canvas usando javascript como este

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

Después de configurar el canvas, necesito dibujar algo de texto que necesite obtener el máximo tamaño de fuente disponible. Por favor, ayúdame a encontrar la forma en que puedo mostrar el texto con el tamaño máximo de fuente. El texto puede contener un solo carácter (mayúscula y minúscula) o una cadena y también puede contener números. Necesito hacerlo con javascript no jquery.

Gracias por tu ayuda.

Reto

Dado que measureText no es compatible actualmente con la medición de la altura (ascenso + descenso), necesitamos hacer un pequeño truco de DOM para obtener la altura de la línea.

Como la altura real de una fuente, o tipo de letra, no necesariamente (rara vez) se corresponde con el tamaño de la fuente, necesitamos una forma más precisa de medirla.

Solución

Demo Fiddle

El resultado será un texto alineado verticalmente que siempre se ajusta al canvas de ancho.

chasquido

Esta solución obtendrá automáticamente el tamaño óptimo para la fuente.

La primera función es ajustar el measureText a la altura de soporte. Si la nueva implementación de las métricas de texto no está disponible, utilice 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]; } 

Ahora podemos realizar un bucle para encontrar el tamaño óptimo (aquí no está muy optimizado, pero funciona para este propósito) y escribí esto ahora para que haya errores, uno de los cuales es si el texto es solo un carácter que no supera el ancho antes de la altura).

Esta función requiere un mínimo de dos argumentos, contexto y texto, los otros son opcionales como nombre de fuente (nombre único), tolerancia [0.0, 1.0] (predeterminado 0.02 o 2%) y estilo (es decir, negrita, cursiva, etc.):

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

Prueba esto.

DEMO FIDDLE

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

Puede proporcionar sus condiciones dependiendo del tamaño de la ventana. Cree una función simple como la siguiente:

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