javascript - 未正确绘制大字体的 HTML5 Canvas 文本描边

Question

我想在 HTML5 canvas 上用红色边框颜色(描边颜色)和绿色填充颜色写一个大文本。 p>

我将描边宽度设置为 5px。

当我将字体大小设置为小于260px时没问题。

这是我的第一个代码 http://jsfiddle.net/8Zd7G/ :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="240px Calibri";
ctx.strokeStyle = "F00"; //Red
ctx.fillStyle = "0F0"; //Green
ctx.lineWidth = 5;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

但是当我将字体大小设置为大于或等于 260 像素时，文本边框/描边的颜色不正确。它只有一个红色边框，没有用红色填充。

这是我的第二个代码 http://jsfiddle.net/Pdr7q/ :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="260px Calibri";
ctx.strokeStyle = "F00";
ctx.fillStyle = "0F0";
ctx.lineWidth = 5;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

我的问题是如何使用大字体(如第一张图片而不是第二张图片)获得正确的文本描边填充？提前致谢:)

Answer 1

这是 Chrome 的一个已知问题，字体大小超过 256 像素(包括缩放):
https://code.google.com/p/chromium/issues/detail?id=280221

目前似乎没有解决该问题的方法，但请按照线程(上面的链接)稍后查看状态(最后更新时间为 10 月 25 日)。

虽然问题仍然存在，但您可以通过减小线宽来减少问题。

另一种选择是将一半大小(以便大小 < 256)绘制到临时 Canvas 中，然后将此 Canvas 绘制到主 Canvas 中，缩放到您需要的大小。它会使文本更加模糊，但它看起来会比我认为的 curl 版本更好。

Firefox 有一个相关的错误(大尺寸的错位):
https://bugzilla.mozilla.org/show_bug.cgi?id=909873