Javascript 使文本适合HTML5画布？

我正在尝试将一些文本呈现到一个单独的画布上，如下所示：

var tmpCanvas = document.createElement("canvas");
var tmpContext = tmpCanvas.getContext('2d');
tmpContext.textAlign = 'center';
tmpContext.font = size + 'px';
tmpCanvas.width = tmpContext.measureText(txt).width;
tmpCanvas.height = size;
tmpContext.fillStyle = "#000";
tmpContext.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height);
tmpContext.fillStyle = color;
tmpContext.fillText(txt, tmpCanvas.width / 2, tmpCanvas.height / 2);

然后将此画布渲染到主画布的中心：

context.drawImage(cachedText, (d_canvas.width / 2) - (cachedText.width / 2), (d_canvas.height / 2) - (cachedText.width / 2), cachedText.width, cachedText.height);

我这样做是因为绘制的文本非常复杂，所以我不想重复多次绘制操作。然而，问题是，尽管我已将画布大小设置为等于文本大小，但文本比画布小，并且偏离中心。我如何创建一个画布/图像对象，上面有一个预渲染的文本，正如我在上面尝试的那样

---

这里有一把小提琴来说明这个问题：

因此，事实证明，您的代码存在一些问题。首先，在画布上设置字体大小时，还必须设置字体类型——在我的示例中，它被设置为通用的“衬线”字体

其次，绘图代码的顺序很奇怪，因此在使用字体大小设置画布宽度之后，在可以使用它绘制字体之前，它被覆盖

最后，定位逻辑是错误的。我已经尽了最大努力尽快修复它，但它需要一些调整。你可以看到它大部分在这里工作

代码需要清理，可能需要在代码前面的变量中存储一些值，以避免两次声明它们。因为我不能在没有代码示例的情况下发布答案，所以我在这里进行了更改

  tmpContext.textAlign = 'center';
  tmpContext.font = size + "px serif";
  tmpCanvas.width = tmpContext.measureText(txt).width;
  tmpCanvas.height = size;
  tmpContext.fillStyle = "#000";
  tmpContext.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height);
  tmpContext.fillStyle = color;
  tmpContext.font = "100px serif";
  tmpContext.fillText(txt, (tmpCanvas.width / 2) - tmpContext.measureText(txt).width / 2,
                      size);

---

当我把尺寸改成200码时，它看起来真的很糟糕。画布的高度似乎在变化，但文本保持不变。因为您将高度设置为大小，所以此处出现了一些错误。让我看一下其他的，然后更新我的答案。是的，但是文本也应该放大到那个大小，因为我把字体大小设置为那个。对吧？哦，我搞砸了。非常感谢。我不知道设置fillstyle会重置.font属性。我也不知道。对于画布来说，这似乎是一种奇怪的处理方式。