基於字體大小在畫布中垂直居中文本

如何基於指定的字體大小垂直對齊畫布中的文本？例如，我有一個高度爲100px的矩形，變量爲textSize。我的目標是始終垂直居中這個特定矩形內的文本。基於字體大小在畫布中垂直居中文本

HTML

<canvas id="canvas" width="500" height="100"></canvas>

var textSize = 40; 

function init() { 

    canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 

    ctx.beginPath(); 
    ctx.lineTo(0, 100); 
    ctx.lineTo(0, 0); 
    ctx.lineTo(500, 0); 
    ctx.lineTo(500, 100); 
    ctx.closePath(); 
    ctx.fillStyle = "#000"; 
    ctx.fill(); 
    ctx.closePath(); 

    // Text 
    ctx.save(); 
    ctx.font = textSize + "px 'Oswald'"; 
    ctx.fillStyle = "#fff"; 
    ctx.textBaseline="middle"; 
    ctx.fillText("Hello, World", 100, (100 - textSize)/2); 
    ctx.restore(); 
} 

window.onload = init();

來源

2016-03-02 DRB

This答案可能幫助

畫布的背景下具有measureText功能，您可以使用。

來源

2016-03-02 12:25:53 Beep

是的，這看起來像是正確的答案。特別是考慮到不同的字體。 – DRB

http://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas – Kaiido

@Beep。雖然您的鏈接有幫助，但請不要發佈僅鏈接的答案 - 即使鏈接是Stackoverflow本身。相反，請將您的鏈接發佈爲原始問題的評論，而不是回答。這有助於我們避免在Stackoverflow上重複問答。 :-) – markE

當您使用textBaseline= "middle"你爲什麼計算y座標考慮TEXTSIZE？可能

ctx.fillText("Hello, World", 100, 50);

這將爲你做這項工作。

來源

2016-03-02 12:23:22 Mahesh

我正在尋找一個計算，如果'textSize'變量的工作。雖然對齊頂部或底部可能會讓事情變得更簡單嗎？ – DRB

基於字體大小在畫布中垂直居中文本

回答

相關問題