在不知道字体系列的情况下更改Canvas的字体大小

有没有办法只更改canvas上下文的字体大小而不必知道/写入字体系列。在不知道字体系列的情况下更改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”之前什么是和我的字体大小替换它。但是如果可能的话，我希望比这更容易。

来源

2013-08-07 RainingChain

更新:(从评论）指定字体没有办法。 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它是第一位的，如果使用）。请注意，字体大小是第四个参数，所以如果您将/不具有字体变体（粗体，斜体，斜体），字体变体（普通，小型帽）和字体粗细（粗体等））。

来源

2013-08-07 00:44:00 K3N

你正在做我在其他说明中提到过的事情： – RainingChain

@RainingChain我可能会失明，但你在哪里显示？ – K3N

@RainingChain没有办法指定字体。 Canvas的字体是在CSS的短版本字体之后建立的。 – K3N

要正确回答你的问题，没有办法改变画布上下文的字体大小，而不必知道/写入字体系列。

来源

2013-08-07 00:52:20 PHPglue

这是一个更简单，更简洁的方式来改变字体大小，无论您是否使用font-variant或font-weight，都可以工作。

假设你的新字体大小为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");

来源

2016-02-25 11:50:25 MacroMan

尝试这（使用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;

来源

2017-05-30 08:59:54

好主意。不需要附加到主体，也不需要使用jQuery。var span = document.createElement（'span'）; span.style.font = ctx。字体;返回span.style.fontSize;' – RainingChain

在不知道字体系列的情况下更改Canvas的字体大小

回答

相关问题