如何根据指定的字体大小垂直对齐画布中的文本?例如,我有一个高度为100px的矩形和变量textSize
。我的目标是始终将文本垂直居中于此特定矩形内。
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();
答案 0 :(得分:1)
This回答可能有帮助
画布的上下文有一个measureText函数,您可以使用它。
答案 1 :(得分:0)
当您使用textBaseline= "middle"
时为什么要考虑textSize来计算y坐标?
大概
ctx.fillText("Hello, World", 100, 50);
这将为你完成这项工作。