Canvas y 0 处的 fillText 将截断方括号

Question

我想在 canvas 的最底部添加文字，所以我这样做：

ctx.textAlign = 'center';
ctx.fillText(text, canvas.width / 2, canvas.width);

这对每种类型的字符都适用，但方括号在底部被截断了：

大文本：

小文字：

一种解决方案是仅将 y 值设置为 canvas.width - someSpacing，但小文本和大文本的像素截断数不同。

那么有没有办法让括号不被切断？

var canvas =  document.getElementById("mycanvas");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
ctx.font = "30px Arial";
ctx.textAlign = "right";
ctx.fillText("[027722]", canvas.width, canvas.width)
ctx.font = "11px Arial";
ctx.textAlign = "left";
ctx.fillText("[027722]", 10, canvas.width)

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

Answer 1

这与字体的基线有关。在排版中，该术语用于描述文本实际 'rests' 的假想背景。 canvas API 提供六种不同类型的基线。

正如您从上面假设的那样，canvas 默认为 'alphabetic'。

幸运的是，修复很简单 - 您只需将基线切换为 bottom 或 ideographic。这可以通过相应地更改 .textBaseline 属性来完成。

let canvas = document.getElementById("myCanvas");
canvas.width = 200;
canvas.height = 200;
let 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)

<canvas id="myCanvas" style="background: #f9f9f9">

Canvas y 0 处的 fillText 将截断方括号

Canvas fillText at y 0 will cutoff square brackets

canvas

html5-canvas