在HTML畫布中檢查字符串的寬度

Question

大家好，我已經盡力編寫一個腳本來檢查字符串的寬度，如果它大於某個值，請降低字體大小並再次繪製它。除了這是行不通的。一旦我最初繪製文本，它就不會更新到正確的字體大小。它只是保持原來的樣子，從來沒有讓腳本陷入無限循環。這裏是我的代碼：

var nFontSize = 25; 

var draw_name = function(text) { 
    var c=document.getElementById("badgeCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.font="nFontSize OpenSansBold"; 
    ctx.fillStyle = "#000000"; 
    ctx.fillText(text,80,25); 
    var metrics = ctx.measureText(text); 
    var width = metrics.width; 

    while (width > 200) { 
     nFontSize--; 
     ctx.font="nFontSize OpenSansBold"; 
     ctx.fillText(text,80,25); 
     metrics = ctx.measureText(text); 
     width = metrics.width; 
    } 

    ctx.font="nFontSize OpenSansBold"; 
    ctx.fillStyle = "#000000"; 
    ctx.fillText(text,80,25); 

Answer 1

「nFontSize OpenSansBold」不是一個有效的字體。嘗試

ctx.font= nFontSize + "px OpenSansBold"; 

而且，你不必渲染它來衡量你的while循環前，while循環裏面的文本，以便去除ctx.fillText(text,80,25);。否則，它會看起來很醜。

var nFontSize = 25; 

var draw_name = function(text) { 
    var c=document.getElementById("badgeCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.font= nFontSize + "px OpenSansBold"; 
    ctx.fillStyle = "#000000"; 

    var metrics = ctx.measureText(text); 
    var width = metrics.width; 

    while (width > 200) { 
     nFontSize--; 
     ctx.font= nFontSize + "px OpenSansBold"; 

     metrics = ctx.measureText(text); 
     width = metrics.width; 
    } 

    ctx.font= nFontSize + "px OpenSansBold"; 
    ctx.fillStyle = "#000000"; 
    ctx.fillText(text,80,25);