HTML5 Canvas fillText原点问题：文本定位为何不可见？

你猜的方向很接近，但要更准确地说——Canvas 里文本绘制的坐标原点，对应的是文本基线（baseline）的起始位置，而非文本包围盒的左下角哦。

为什么你的代码看不到文本？ #

默认情况下，Canvas 的textBaseline属性值是alphabetic（字母基线），这条线是英文小写字母（比如a、c、x）底部对齐的基准线。当你调用c.fillText("Sunday", 0, 0)时，这条基线刚好落在画布的顶部边缘（y=0的位置），而文本的主体部分其实都在基线的上方（y轴负方向，超出了画布的可视区域），所以自然看不到完整的文本。

当你把y值改成1时，基线向下移动了1像素，文本的下半部分（比如字母y的尾巴）刚好进入画布的可视范围，你看到的就是这条基线附近的内容。

怎么让文本在(0,0)位置正常显示？ #

最简单的方法是修改文本基线的对齐方式：

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.textBaseline = 'top'; // 将基线设置为文本顶部
c.fillText("Sunday", 0, 0); // 现在文本会从画布左上角开始显示

除了top，textBaseline还有其他可选值，比如bottom（基线对应文本底部）、middle（基线对应文本垂直中心）等，可以根据需求灵活调整。

补充说明 #

Canvas 的文本定位逻辑和普通DOM元素的定位不太一样，核心就是围绕textBaseline（垂直方向）和textAlign（水平方向，默认是start）这两个属性来控制。理解了这两个属性，就能精准控制文本在画布上的位置啦。

内容的提问来源于stack exchange，提问作者Denno