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

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中的字体短版本为蓝本的.

但是,画布上总是有一个字体集(或字体类型),所以你可以做的是首先使用它来提取当前字体,如下所示:

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(粗体等),这将不起作用.