Modifica la dimensione del carattere della tela senza conoscere la famiglia di font

Question

Esiste un modo per modificare solo la dimensione del carattere di un contesto canvas senza dover conoscere/scrivere la famiglia di caratteri.

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

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

Nota:

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 

Altro nota: avrei potuto fare qualcosa di simile: individuare dove 'px' è, rimuovere ciò che è prima di 'px' e sostituirlo con la mia dimensione del carattere. Ma mi piacerebbe qualcosa di più facile di quello, se possibile.

Answer 1

Aggiornamento: (dai commenti) Non c'è modo di specificare il carattere. Il font Canvas è modellato sulla versione a mano corta del font in CSS.

Tuttavia, v'è sempre un tipo di carattere impostato sulla tela (o un carattere tipo) in modo che cosa si può fare è quello di estrarre prima il tipo di carattere corrente utilizzando in questo modo:

var cFont = ctx.font; 

quindi sostituire argomenti di dimensione e reimpostare (si noti che potrebbe esserci anche un parametro di stile).

Un semplice divisa per il bene di esempio:

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

Avrete bisogno di sostegno per lo stile, se necessario (IIRC si tratta in primo luogo se utilizzato). Si noti che la dimensione del font è il quarto parametro, quindi non funzionerà se si ha/non ha la variante font (grassetto, corsivo, obliquo), font-variant (normale, small-caps) e font-weight (grassetto, ecc.).

Answer 2

Per rispondere correttamente alla domanda, non è possibile modificare la dimensione del carattere di un contesto di disegno senza dover conoscere/scrivere la famiglia di caratteri.

Answer 3

Ecco un modo più semplice e più semplice per modificare la dimensione del carattere che funzionerà a prescindere se si utilizzano font-variant o font-weight o meno.

Assumendo che il nuovo formato font è 12px

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

o un bel uno di linea, se si vuole aumentare di 2 punti:

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

Answer 4

provare questo (utilizzando 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;