Schriftgröße von Canvas ändern, ohne die Schriftfamilie zu kennen

Question

Gibt es eine Möglichkeit, nur die Schriftgröße eines Canvas-Kontexts zu ändern, ohne die Schriftfamilie kennen/schreiben zu müssen.

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

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

Hinweis:

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 

Andere Anmerkung: Ich habe etwas wie tun könnte: erkennen, wo ‚px‘ ist, entfernen, was vor ‚px‘ und ersetzen Sie es durch meine Schriftgröße. Aber ich würde gerne etwas einfacher als das, wenn möglich.

Answer 1

Update: (aus Kommentaren) Es gibt keinen Weg um Schriftart anzugeben. Die Canvas-Schriftart ist der Kurzversion der Schriftart in CSS nachempfunden.

Allerdings gibt es immer eine Schrift auf der Leinwand gesetzt (oder eine Schriftart Typ) so, was Sie tun können, ist zunächst die aktuelle Schriftart zu extrahieren, indem es wie folgt aus:

var cFont = ctx.font; 

Dann ersetzen größenargumente und setze es zurück (beachte, dass es dort auch einen style-parameter geben kann).

Eine einfache Spaltung im Interesse des Beispiels:

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

Sie Unterstützung für Stil benötigen, wenn nötig (IIRC es kommt zum ersten Mal verwendet, wenn). Beachten Sie, dass font-size der vierte Parameter ist. Dies funktioniert nicht, wenn Sie font-variant (fett, kursiv, schräg), font-variant (normal, Kapitälchen) und font-weight (fett usw.) haben).

Answer 2

Um Ihre Frage richtig zu beantworten, gibt es keine Möglichkeit, die Schriftgröße eines Canvas-Kontexts zu ändern, ohne die Schriftfamilie kennen/schreiben zu müssen.

Answer 3

Hier ist eine einfachere und sauberere Möglichkeit, die Schriftgröße zu ändern, die unabhängig davon funktioniert, ob Sie Schriftvariante oder Schriftgröße verwenden oder nicht.

Angenommen, Ihre neue Schriftgröße 12px

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

Oder ein schönes Motto, wenn Sie um 2 Punkte erhöhen möchten:

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

Answer 4

versuchen, diese (mit 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;