基于字体大小在画布中垂直居中文本

时间:2016-03-02 11:46:14

标签: javascript html5 canvas

如何根据指定的字体大小垂直对齐画布中的文本?例如,我有一个高度为100px的矩形和变量textSize。我的目标是始终将文本垂直居中于此特定矩形内。

Link to JS Fiddle

HTML

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

JS

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();

2 个答案:

答案 0 :(得分:1)

This回答可能有帮助

画布的上下文有一个measureText函数,您可以使用它。

答案 1 :(得分:0)

当您使用textBaseline= "middle"时为什么要考虑textSize来计算y坐标? 大概

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

这将为你完成这项工作。