26

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

 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”之前的内容并用我的字体大小替换它。但如果可能的话，我想要比这更容易的东西。

4

5 回答 5

20

这是一种更简单、更简洁的更改字体大小的方法，无论您是否使用 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-25T11:50:25.600 回答
10

更新：（来自评论）没有办法指定字体。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，它首先出现）。注意 font-size 是第四个参数，所以如果你有/没有 font-variant(bold,italic,oblique), font-variant(normal, small-caps) 和 font-weight(bold etc) 这将不起作用.

于 2013-08-07T00:44:00.743 回答
1

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

于 2013-08-07T00:52:20.110 回答
1

试试这个（使用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-30T08:59:54.753 回答
0

一种不用担心刮掉所有其他参数的更简洁的方法：

canvas.style.font = canvas.getContext("2d").font;
canvas.style.fontSize = newVal + "px";

canvas.getContext("2d").font = canvas.style.font;

说明：如第一个答案中所述，画布上下文将始终具有字体。所以canvas.getContext("2d").font可能会返回类似"10px sans-serif". 为了不刮掉这个字符串，我们可以使用 Canvas DOM 元素（或任何其他元素）来解析完整的字体规范并填充其他字体字段。这意味着设置后：

canvas.style.font = "10px sans-serif";
canvas.style.fontSize = "26px";

将canvas.style.font成为"26px sans-serif"。然后我们可以将此字体规范传递回画布上下文。

于 2020-05-27T13:56:53.193 回答