Question

我试图将一些文本呈现给单独的画布，如下所示：

__invoke2

然后将此画布渲染到主画布＆＃39;中心：

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

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

这是一个解释问题的小提琴：http://jsfiddle.net/x4t1vjam/

Answer 1

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

其次，你的绘图代码是一个奇怪的顺序，所以在使用字体大小来设置画布的宽度之后，它被覆盖，然后才能用它来绘制字体。

最后，定位逻辑是错误的。我已经尽了最大努力来解决它，但它需要一些调整。你可以看到主要是在这里工作;

http://jsfiddle.net/x4t1vjam/5/

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

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

使文字适合HTML5画布？

1 个答案: