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

Question

如果我设置了ctx.textBaseline = "top";，然后调整了画布大小，则ctx.textBaseline会变回"alphabetic". 这是预期的行为吗？这个问题让我难住了，所以我很好奇。发生在 Chrome 和 Firefox 中，所以我最初的猜测是这是预期的行为。

这是问题的演示。

// 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);

谢谢！

Answer 1

这似乎确实是指定的行为。请参阅HTML 规范中“设置位图尺寸”的定义。当 HTMLCanvasElement 本身的宽度或高度属性发生更改时，会调用该算法，该算法会重置 CanvasRenderingContext2D 对象的状态：

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

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

2. [...]

画布上下文的“状态”也在2D 上下文规范 中明确定义，并被textBaseline列为组成其状态的属性之一。HTML 规范中也重申了这一点。