用于大字体大小的HTML5画布文本笔划未正确绘制

Question

我想在HTML5画布上写一个带有红色边框颜色(笔触颜色)和绿色填充颜色的大文本.

我将笔划宽度设为5px.

当我设置font size为小于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);

但是当我设置font size为大于或等于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）绘制到临时画布中，然后将此画布绘制到主画布中，缩放到您需要的大小。它会使文本更加模糊，但我相信它看起来比卷曲版本更好。

Firefox 有一个相关的错误（大尺寸时未对齐）：
https://bugzilla.mozilla.org/show_bug.cgi ?id=909873