使文本适合HTML5 Canvas？

user3024235 发表于 Dev

用户名

我正在尝试将文本渲染到单独的画布上，如下所示：

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

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

这是用来说明问题的小提琴：http : //jsfiddle.net/x4t1vjam/

刘易斯

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。