Modifier la taille de police de Canvas sans connaître la famille de polices

Question

Y a-t-il un moyen de modifier uniquement la taille de police d'un contexte de canevas sans avoir à connaître/écrire la famille de polices.

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

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

Note:

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 

Autre remarque: je pouvais faire quelque chose comme: détecter où 'px' est, enlever ce qui est avant 'px' et le remplacer par ma taille de police. Mais j'aimerais quelque chose de plus facile que cela si possible.

Answer 1

Mise à jour: (à partir de commentaires) Il n'y a aucun moyen de spécifier la police. La police Canvas est modélisée d'après la version abrégée de la police en CSS.

Cependant, il y a toujours une police mis sur la toile (ou un type de police ) donc ce que vous pouvez faire est d'abord extraire la police en cours en utilisant comme ceci:

var cFont = ctx.font; 

Puis remplacer taillez les arguments et rétablissez-le (notez qu'il peut y avoir un paramètre de style aussi).

Une scission simple pour le titre d'exemple:

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

Vous aurez besoin d'un soutien pour le style si nécessaire (IIRC il vient d'abord si elle est utilisée). Notez que la taille de police est le quatrième paramètre, donc cela ne fonctionnera pas si vous avez/ne pas avoir la variante de police (gras, italique, oblique), police-variant (normal, small-caps) et font-weight (bold, etc.).

Answer 2

Pour répondre correctement à votre question, il est impossible de modifier la taille de police d'un contexte de canevas sans avoir à connaître/écrire la famille de polices.

Answer 3

Voici une manière plus simple et plus simple de changer la taille de police qui fonctionnera, que vous utilisiez ou non police-variant ou font-weight.

En supposant que votre nouvelle taille de la police est 12px

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

Ou une belle une doublure si vous voulez augmenter de 2 points:

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

Answer 4

essayer (en utilisant 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;