我通过javascript画了一个白色的方框，并想在方框的中心画一个数字，但无论我如何尝试改变位置，数字总是有点偏离：
// Create a canvas element
const canvas = document.getElementsByTagName("canvas")[0]
canvas.width = 150;
canvas.height = 150;
// Get the drawing context
const ctx = canvas.getContext('2d');
drawNumberBox(ctx, 123, 0,0, 100, 100, "arial");
function drawNumberBox(ctx, number, x, y, width, height, fontName) {
// Draw the white background rectangle
ctx.fillStyle = 'white';
ctx.fillRect(x, y, width, height);
// Set the font and text alignment
ctx.font = `100px ${fontName}`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = 'black';
// Check if the number fits within the box
while (ctx.measureText(number).width > width) {
// Decrease the font size until the number fits within the box
ctx.font = `${parseInt(ctx.font) - 1}px ${fontName}`;
}
// Draw the number centered inside the box
const xPos = x + (width / 2);
const yPos = y + (height / 2)
ctx.fillText(number, xPos, yPos);
}<html><body>
<canvas style="background:blue; border:red solid 2px"/>
</body></html>
1条答案
按热度按时间lrpiutwd1#
在this fiddle中，我修改了代码，使用measureText函数的实际边界框属性将文本居中。
更精确的文本宽度是右边界框和左边界框大小之和，并且可以如上所示计算真实中心距渲染点的偏移。
这是必要的，因为字体，甚至使用的特定字符，可能导致实际的边界框不在呈现点的中心。