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

【问题标题】：Change font size of Canvas without knowing font family在不知道字体系列的情况下更改 Canvas 的字体大小
【发布时间】：2013-08-07 00:31:25
【问题描述】：

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

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

【问题讨论】：

标签： javascript canvas

【解决方案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");

【讨论】：

replace 可以带一个函数来代替，你不需要做两次正则表达式匹配...
有时需要用float代替int。 ctx.font = ctx.font.replace(/[0-9.]+px/, (parseFloat(ctx.font.match(/[0-9.]+px/)) + 2) + "px")可以覆盖这种情况。

【解决方案2】：

更新：（来自 cmets）没有办法指定字体。 Canvas 的字体仿照 CSS 中的简写字体。

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

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) 这将不起作用.

【讨论】：

你正在做我在其他笔记中提到的事情：
@RainingChain 我可能会失明，但你在哪里展示这个？
@RainingChain 无法指定字体。 Canvas 的字体仿照 CSS 中的简写字体。
似乎很愚蠢，您不能单独指定字体道具:(
这个答案不考虑包含空格的字体名称，如sakkal majalla 或Times New Roman 等。按空格分割将产生一个包含字体大小加上与字体名称一样多的单词的数组，每个都在一个元素中

【解决方案3】：

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

【讨论】：

【解决方案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;

【讨论】：

好主意。无需附加到正文，也无需使用 jQuery。 var span = document.createElement('span'); span.style.font = ctx.font; return span.style.fontSize;

【解决方案5】：

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

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"。然后我们可以将此字体规范传递回画布上下文。

【讨论】：

你没有在任何地方设置新的fontSize？
如第一个答案中所述，画布上下文将始终具有字体。所以canvas.getContext("2d").font 可能会返回类似"10px sans-serif" 的东西。为了不刮掉这个字符串，我们可以使用 Canvas DOM 元素（或任何其他元素）来解析完整的字体规范并填充其他字体字段。这意味着设置canvas.style.fontSize = "26px"; 后，canvas.style.font 将变为"26px sans-serif"。然后我们将此字体规范反馈给画布上下文。