Используйте Javascript для получения максимального размера шрифта в холсте

Question

Я рисую холст, который должен быть на полном доступном экране (100% ширина и высота). Установить ширину и высоту холста, используя JavaScript, как этот

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

После установки холста, мне нужно сделать какой-нибудь текст в нем, который нужно получить максимальный доступный размер шрифта. Помогите мне найти способ отображения текста с максимальным размером шрифта. Текст может содержать один символ (как верхний, так и малый регистр) или строку и также может содержать числа. Мне нужно сделать это с javascript, а не jquery.

Благодарим за помощь.

Answer 1

вызова

Как холст 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]; 
} 

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 = 'I M @ CENTER!'; 
context.font = '10pt Calibri'; //try changing values 10,15,20 
context.textAlign = 'center'; 
context.fillStyle = 'red'; 
context.fillText(text, x, y); 

Вы можете предоставить свои условия в зависимости от окна size.Create простой функции, как следующее:

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