Question

我正在开发基于画布的应用程序，我的文本垂直对齐方面存在一些问题。我使用浮点坐标，我认为这是问题的原因。我不确定，但仍在寻找解决方案。无论如何，我用来显示字母＆＃39; O＆＃39;例如，在广场上是：

context.fillRect(0, 0, 21.864951768488744, 21.864951768488744);
context.textBaseline = 'middle';
context.textAlign = alignLeft ? 'left' : 'center';
context.fillText('O', 10.932475884244372, 10.932475884244372);

画布上的结果是＆＃39; O＆＃39;水平居中，但放置在中心上方约1-2个像素处。

有没有人对此有任何想法？

Answer 1

它为下降的角色留下了空间。添加一个像“y”这样的下降器来看看我的意思。

<!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.fillStyle = "#FF0000";
context.fillRect(0, 0, 21.864951768488744, 21.864951768488744);
context.font = "10px Arial";
context.fillStyle = "#FFffff";
context.textBaseline = 'middle';
context.textAlign = 'center';
context.fillText('Oy', 10.932475884244372, 10.932475884244372);
</script>
</body>
</html>

Answer 2

在编写文本时似乎确实存在浮动坐标的问题。例如 - http://codepen.io/petor/pen/NRPgVq - 清楚地显示文本无法显示在子像素坐标上，并将放置在圆角坐标上（至少在Chrome上）。

<!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>

画布文本的垂直对齐

2 个答案: