当Canvas（画布）的宽度/高度被改变时，Canvas上下文会被重置。

Question

当Canvas（画布）的宽度/高度被改变时，Canvas上下文会被重置。

9

如果我设置ctx.textBaseline = "top";，但然后调整画布大小，ctx.textBaseline会被改回"alphabetic"。这是期望的行为吗？这个问题让我困扰了一段时间，所以我只是好奇。在Chrome和Firefox中发生，所以我的初步猜测是这是期望的行为。

这里有一个演示这个问题的demo。

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

谢谢！

- user993683

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Semicolon · Accepted Answer

这确实是指定的行为。请参阅HTML规范中"设置位图尺寸"的定义。当HTMLCanvasElement本身的宽度或高度属性改变时，会调用该算法将CanvasRenderingContext2D对象的状态重置为默认值：

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

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

[...]

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