时间戳

首页 > 解决方案 > 无法同时设置画布宽度和更改字体？

javascript - 无法同时设置画布宽度和更改字体？

问题描述

http://jsfiddle.net/sLk72mud/

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

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

覆盖字体大小：

tCtx.font = "25px serif"

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

标签： javascriptcsshtml5-canvas

解决方案

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

   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()函数。

推荐阅读