我正在开发一个基于画布的应用程序，并且我的文本垂直对齐存在一些问题。我正在使用浮点坐标，我认为这是问题的原因。虽然我不确定，但仍在寻找解决方案。无论如何，例如，我用于在正方形中显示字母“O”的代码是：
context.fillRect(0, 0, 21.864951768488744, 21.864951768488744);
context.textBaseline = 'middle';
context.textAlign = alignLeft ? 'left' : 'center';
context.fillText('O', 10.932475884244372, 10.932475884244372);
画布上的结果是“O”水平居中，但放置在中心上方约 1 - 2 个像素处。
有人对此有什么想法吗？
mab*_*mab 11
它为具有下行字符的字符留出空间。添加一些带有下降部分的东西，比如“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.textBaseline = 'middle';
context.textAlign = 'center';
context.fillText('Oy', 10.932475884244372, 10.932475884244372);<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>看来写文本时确实存在坐标浮动的问题。作为示例 - 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>
| 归档时间： |
|
| 查看次数： |
16837 次 |
| 最近记录： |