更改画布宽度/高度时，将重置画布上下文

Posted 2021-04-15

如果我设置ctx.textBaseline = "top";，但随后调整画布大小，ctx.textBaseline将变回"alphabetic"。这是预期的行为吗？这个问题让我感到难过，所以我只是好奇。发生在Chrome和Firefox中，所以我最初的猜测是它的预期行为。

Here's a demo of the problem。

// textBaseline not working:
let ctx1 = canvas1.getContext("2d");
ctx1.textBaseline = "top";
canvas1.width = 31;
canvas1.height = 31;
ctx1.fillText("hi", 10, 10);

// fixed:
let ctx2 = canvas2.getContext("2d");
canvas2.width = 31;
canvas2.height = 31;
ctx2.textBaseline = "top"; // <-- need to set it *after* resize to get it to work
ctx2.fillText("hi", 10, 10);

谢谢！

答案

这似乎是指定的行为。查看"set bitmap dimensions" in the HTML spec的定义。当htmlCanvasElement本身的width或height属性发生更改时，将调用该算法重置CanvasRenderingContext2D对象的状态：

当用户代理将位图尺寸设置为宽度和高度时，它必须运行以下步骤：

1. 将渲染上下文重置为其默认状态。
2. [...]

画布上下文的“状态”也明确定义为in the 2D Context spec，而textBaseline被列为构成其状态的属性之一。它也是reiterated in the HTML spec。