在不知道字體系列的情況下更改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的字體大小

回答

相關問題