不能同时设置画布宽度和更改字体？答案

【问题标题】：Cannot set canvas width and change font at the same time?不能同时设置画布宽度和更改字体？
【发布时间】：2021-04-12 13:40:02
【问题描述】：

http://jsfiddle.net/sLk72mud/

在 jsfiddle 中，调用 measureText 设置画布宽度：

tCtx.canvas.width = tCtx.measureText(this.value).width;

覆盖字体大小：

tCtx.font = "25px serif"

如果我删除对 measureText 的调用，那么画布将使用我期望的字体大小。不幸的是，我不得不猜测画布的宽度。为什么会这样？有更好的方法吗？

【问题讨论】：

标签： javascript css html5-canvas

【解决方案1】：

更改画布尺寸也会重置上下文。调整大小后，您需要再次设置字体（以及任何其他非默认设置）。

   tCtx.font = 'bold 24px serif';
   tCtx.canvas.width = tCtx.measureText(this.value).width;
   tCtx.font = 'bold 24px serif';
   tCtx.fillText(this.value, 0, 10);

保存的状态（通过.save()/.restore()）在调整大小时也会丢失。如果您希望对画布状态进行大量更改，您可能希望将这些更改分解为您自己的 .save()/.restore() 函数。

【讨论】：

【解决方案2】：

只需将 tCtx.font 语句移动到 fillText 语句之前

   tCtx.canvas.width = tCtx.measureText(this.value).width;
   tCtx.font = 'bold 24px serif';
   tCtx.fillText(this.value, 0, 10);

【讨论】：

但是.measureText() 使用的是旧的或默认的字体设置。
你需要定义两次，一次是在调整大小之前，一次是在调整大小之后