Question

Czy istnieje sposób na zmianę rozmiaru czcionki kontekstu canvas bez konieczności znajomości/napisania rodziny czcionek.

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

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

Uwaga:

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 

Inne uwaga: mógłby zrobić coś takiego: wykryć gdzie 'px' to, co jest przed usunąć 'px' i zastąpienie go przez mojego rozmiaru czcionki. Ale jeśli to możliwe, chciałbym coś łatwiejszego.

Answer 1

Aktualizacja: (z komentarzy) Nie ma sposobu na określenie czcionki. Czcionka Canvas jest wzorowana na skróconej wersji czcionki w CSS.

Jednak zawsze istnieje czcionki ustawiony na płótnie (lub czcionki typ), więc co można zrobić, to najpierw wyodrębnić bieżącej czcionki używając go tak:

var cFont = ctx.font; 

Następnie zastąpić rozmiar argumentów i ustaw go z powrotem (pamiętaj, że może tam być również parametr stylu).

Prosty podzielonego przez wzgląd na przykład:

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

Będziesz potrzebował wsparcia dla stylu razie potrzeby (IIRC przychodzi pierwszy, jeżeli są stosowane). Zauważ, że rozmiar czcionki jest czwartym parametrem, więc to nie zadziała, jeśli będziesz mieć/nie masz wariantu czcionki (pogrubiony, pochylony, ukośny), wariantu czcionki (normalny, mały-cap) i ciężaru czcionki (pogrubiony itd.).

Answer 2

Aby poprawnie odpowiedzieć na pytanie, nie ma możliwości zmiany rozmiaru czcionki w kontekście canvas bez konieczności znajomości/napisania rodziny czcionek.

Answer 3

Oto łatwiejszy i czystszy sposób zmiany rozmiaru czcionki, który zadziała, niezależnie od tego, czy używasz wariantu czcionki, czy czcionki.

Zakładając, że nowy rozmiar czcionki jest 12px

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

albo ładny jeden liner jeśli chcesz zwiększyć o 2 punkty:

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

Answer 4

spróbuj tego (przy użyciu 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;