Canvas使用fillText在底部绘制文本时方括号被截断如何解决？

问题原因 #

• Canvas 2D默认textBaseline为alphabetic，fillText的第三个参数y坐标对应的是文本基线的位置。你将y设为画布高度时，基线刚好对齐画布最底部，基线以下的字符像素（方括号底部、p/q等字母的下沉部分）就会被画布截断。
• 不同字号、不同字体的基线下沉高度不同，固定减去一个偏移值无法适配所有场景。
• 补充：你原有代码里误将y坐标的参考值写为canvas.width，如果画布宽高不一致会出现位置错误，建议统一用canvas.height作为底部参考。

适配所有字号的两种方案 #

方案1：动态计算文本下沉高度（推荐，不影响全局配置） #

通过ctx.measureText获取当前字体下文本的实际尺寸，用actualBoundingBoxDescent属性拿到基线到文本最底部的像素值，绘制时将y坐标减去这个值即可：

var canvas =  document.getElementById("mycanvas");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');

// 封装底部绘制文本的通用方法
function fillTextAtBottom(text, x) {
  const metrics = ctx.measureText(text);
  // 计算刚好不会超出底部的y坐标
  const y = canvas.height - metrics.actualBoundingBoxDescent;
  ctx.fillText(text, x, y);
}

// 测试大字号
ctx.font = "30px Arial";
ctx.textAlign = "right";
fillTextAtBottom("[027722]", canvas.width);

// 测试小字号
ctx.font = "11px Arial";
ctx.textAlign = "left";
fillTextAtBottom("[027722]", 10);

HTML部分无需修改：

<canvas id="mycanvas"></canvas>

方案2：修改文本基线属性（写法更简单） #

直接将上下文的textBaseline设为bottom，此时fillText传入的y坐标会自动对齐文本的最底部，不需要额外计算：

var canvas =  document.getElementById("mycanvas");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
// 全局设置文本基线为底部对齐
ctx.textBaseline = "bottom";

ctx.font = "30px Arial";
ctx.textAlign = "right";
ctx.fillText("[027722]", canvas.width, canvas.height);

ctx.font = "11px Arial";
ctx.textAlign = "left";
ctx.fillText("[027722]", 10, canvas.height);

两种方案都可以完美适配任意字号、任意字体的场景，不会出现底部截断的问题。

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