我正在尝试将一些文本渲染到单独的 Canvas 上,如下所示:
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);
然后将该 Canvas 渲染到主 Canvas 的中心:
context.drawImage(cachedText, (d_canvas.width / 2) - (cachedText.width / 2), (d_canvas.height / 2) - (cachedText.width / 2), cachedText.width, cachedText.height);
我这样做是因为绘制的文本非常复杂,所以我不想多次重复绘制操作。然而,问题是,尽管我已将 Canvas 大小设置为等于文本大小,但文本小于 Canvas ,并且偏离中心。正如我上面尝试的那样,如何创建一个带有预渲染文本的 Canvas /图像对象。
这是一个 fiddle 来说明问题:http://jsfiddle.net/x4t1vjam/
最佳答案
所以,事实证明,您的代码存在一些问题。首先也是最重要的,当您在 Canvas 上设置字体大小时,还必须设置字体类型 - 在我的示例中,它被设置为通用“衬线”字体。
其次,您的绘图代码的顺序很奇怪,因此在使用字体大小设置 Canvas 宽度之后,它在用于绘制字体之前被覆盖。
最后,定位逻辑错误。我已尽最大努力快速修复它,但它需要一些调整。您可以看到它大部分在这里工作;
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);
关于javascript - 使文本适合 HTML5 Canvas?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36174944/