未正确绘制大字体的 HTML5 画布文本描边

Question

我想在 HTML5 画布上用 红色边框颜色（笔触颜色）和 绿色填充颜色写一个大文本。 p>

我将笔画宽度设为 5px。

当我将font size 设置为小于 260 像素 时很好。

这是我的第一个代码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 日）。

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

另一种选择是将一半大小（使大小

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

Answer 2

这是有效的

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = '120pt Calibri';
ctx.strokeStyle = "#F00";
ctx.fillStyle = "#0F0";
ctx.lineWidth = 3;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

工作演示 ---> jsFiddle

Answer 3

我认为问题可能与您使用的字体系列有关：“Calibri”

我在带有 ubuntu (Chrome 27) 的 Chrome 上，我这里没有 calibri，但我已经用 Arial 进行了测试，效果很好（注意字体大小为 360 像素，甚至比你的大）：

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

演示：

JSFiddle