Изменить размер шрифта Canvas без знания семейства шрифтов

Есть ли способ изменить размер шрифта в контексте холста без необходимости знать/писать семейство шрифтов.

 var ctx = document.getElementById("canvas").getContext("2d");

 ctx.font = '20px Arial'; //Need to speficy both size and family...

Примечание:

ctx.fontSize = '12px'; //doesn't exist so won't work...
ctx.style.fontSize = '20 px' //doesn't exist so won't work... 
                         //we are changing the ctx, not the canvas itself

Другое примечание: я мог бы сделать что-то вроде: определить, где "px", удалить, что перед "px", и заменить его на размер моего шрифта. Но мне бы хотелось, если возможно, что-то проще.

Ответ 1

Обновление: (из комментариев) Нет смысла определять шрифт. Шрифт Canvas 'моделируется после короткой версии шрифта в CSS.

Однако на холсте (или типе шрифта) всегда есть шрифт, поэтому вы можете сначала извлечь текущий шрифт, используя его следующим образом:

var cFont = ctx.font;

Затем замените аргументы размера и установите его обратно (обратите внимание, что там может быть и параметр стиля).

Простой раскол для примера:

var fontArgs = ctx.font.split(' ');
var newSize = '12px';
ctx.font = newSize + ' ' + fontArgs[fontArgs.length - 1]; /// using the last part

Вам понадобится поддержка стиля, если это необходимо (IIRC он приходит первым, если используется). Обратите внимание, что размер шрифта - это четвертый параметр, поэтому это не будет работать, если у вас будет/не будет вариант шрифта (жирный, курсив, наклонный), вариант шрифта (нормальный, малый размер) и font-weight (жирный шрифт и т.д.),.

Ответ 2

Вот более простой и понятный способ изменения размера шрифта, который будет работать независимо от того, используете ли вы вариант шрифта или шрифт или нет.

Предполагая, что ваш новый размер шрифта равен 12px

ctx.font = ctx.font.replace(/\d+px/, "12px");

Или хороший лайнер, если вы хотите увеличить на 2 пункта:

ctx.font = ctx.font.replace(/\d+px/, (parseInt(ctx.font.match(/\d+px/)) + 2) + "px");

Ответ 3

Чтобы правильно ответить на ваш вопрос, нет способа изменить размер шрифта контекста canvas, не зная/не записывая семейство шрифтов.

Ответ 4

попробуйте это (используя jquery):

    var span = $('<span/>').css('font', context.font).css('visibility', 'hidden');
    $('body').append(span);
    span[0].style.fontWeight = 'bold';
    span[0].style.fontSize = '12px';
    //add more style here.
    var font = span[0].style.font;
    span.remove();
    return font;