Question

是否有办法只更改画布上下文的字体大小而无需知道/写入字体系列。

 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'之前的内容并将其替换为我的字体大小。但如果可能的话，我想要比这更容易。

Answer 1

无论您是否使用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");

Answer 2

更新:(来自评论）无法指定字体。 Canvas'字体以CSS中的字体短版本为蓝本。

但是，画布上总是有一个字体集（或字体 type ），所以你可以做的就是首先使用它来提取当前字体：

var cFont = ctx.font;

然后替换size参数并将其设置回来（注意那里可能还有一个样式参数）。

为了举例，我们进行了简单的拆分：

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

如果需要，您将需要支持样式（IIRC如果使用则首先出现）。请注意，font-size是第四个参数，因此如果您有/不具有font-variant（粗体，斜体，斜体），font-variant（普通，小型大写）和font-weight（粗体等），这将不起作用

Answer 3

要正确回答您的问题，无需更改/写入字体系列就无法更改画布上下文的字体大小。

Answer 4

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

Answer 5

一种更清洁的方式，无需担心会刮除其他所有参数：

@Transactional

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

5 个答案: