Javascript 画布文本的垂直对齐
我正在开发一个基于画布的应用程序，我在文本的垂直对齐方面遇到了一些问题。我使用的是浮点坐标，我认为这是问题的原因。但我不确定，尽管如此，我仍在寻找解决方案。无论如何，例如，我用于在正方形中显示字母“O”的代码是：Javascript 画布文本的垂直对齐,javascript,canvas,Javascript,Canvas,我正在开发一个基于画布的应用程序，我在文本的垂直对齐方面遇到了一些问题。我使用的是浮点坐标，我认为这是问题的原因。但我不确定，尽管如此，我仍在寻找解决方案。无论如何，例如，我用于在正方形中显示字母“O”的代码是： context.fillRect(0, 0, 21.864951768488744, 21.864951768488744); context.textBaseline = 'middle'; context.textAlign = alignLeft ? 'left' : 'cent
context.fillRect(0, 0, 21.864951768488744, 21.864951768488744);
context.textBaseline = 'middle';
context.textAlign = alignLeft ? 'left' : 'center';
context.fillText('O', 10.932475884244372, 10.932475884244372);
有人对此有什么想法吗？这为具有后代的角色留出了空间。加上一个像“y”这样的下降符号，看看我的意思
var c=document.getElementById（“myCanvas”）；
var context=c.getContext（“2d”）；
context.fillStyle=“#FF0000”；
context.fillRect（0,0,21.864951768488744,21.864951768488744）；
context.font=“10px Arial”；
context.fillStyle=“#FFffff”；
context.textb基线='middle'；
context.textAlign='center'；
context.fillText（'Oy'，10.9324758844372，10.9324758844372）
您的浏览器不支持HTML5画布标记。
似乎在编写文本时确实存在浮动坐标的问题。如示例所示--清楚地显示文本不能显示在亚像素坐标上，而将被放置在圆形坐标上（至少在Chrome上）
您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var context=c.getContext（“2d”）；；
context.font=“10px Arial”；
context.fillText（'O'，0,10）；
上下文。填充文本（'O'，10，10.1）；
上下文。填充文本（'O'，20，10.2）；
上下文。填充文本（'O'，30，10.3）；
上下文。填充文本（'O'，40，10.4）；
上下文。填充文本（'O'，50，10.5）；
上下文。填充文本（'O'，60，10.6）；
上下文。填充文本（'O'，70，10.7）；
上下文。填充文本（'O'，80，10.8）；
上下文。填充文本（'O'，90，10.9）；
上下文。填充文本（'O'，100，11）；
可能是字体实际上不是自然中心字体，您使用的是哪种字体？有些字体可以在不同的系统上显示在明显不同的位置（有时令人非常恼火）。垂直对齐是指字体的基线。每个单独的字符不是垂直居中的——或者您会看到文本的倾斜和上升字符。大写字母“O”是一个高字符，可能比同一字体的较短字符垂直延伸得更高。这是有道理的，但当我画较大的字符时，我觉得我看不到这种错位。进一步检查后，我发现使用较大字体时，错位仍然是1-2像素，根本看不清楚。这意味着不对中似乎不成比例，这使得我最初的假设（浮动坐标的某种舍入误差）仍然有意义。正如我在另一篇评论中所解释的，添加倾斜字符会将文本置于中心下方1-2像素处。虽然看起来像这样，但当我写文本“Oy”时，文本也没有完全居中。在您给出的示例中，文本位于中心下方1个像素处。。正如我在另一篇评论中提到的，当使用更大的字符时，位移仍然是1-2像素，因此失调不会缩放。因此，在我看来，这更像是一个舍入问题，而不是下降问题。另一方面，文本“Oy”中的O与文本“O”中的O位于相同的y坐标。肯定还有空间留给下降，但知道这并不能让我更深入地了解如何解决1-2像素的错位问题。文本根本没有（准确地）居中。。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var context= c.getContext("2d");;
context.font = "10px Arial";
context.fillText('O', 0, 10);
context.fillText('O', 10, 10.1);
context.fillText('O', 20, 10.2);
context.fillText('O', 30, 10.3);
context.fillText('O', 40, 10.4);
context.fillText('O', 50, 10.5);
context.fillText('O', 60, 10.6);
context.fillText('O', 70, 10.7);
context.fillText('O', 80, 10.8);
context.fillText('O', 90, 10.9);
context.fillText('O', 100, 11);
</script>
</body>
</html>